DatePicker - 基于jQuery 的日期选择控件 - 凡事预则立,?预则废

??久因为公?活动需求,需?一个简?的日期选择控件,而且时效性?是很短,所以?想去用JQuery UI那样笨?的日期选择?件,于是就有了今天这篇:

首先从需求角度出?,我们对日期?求?高,比如??求一定?有明确的星期几,??求有明确的用户输入日期;但是?求:

  1. 体积够?,速度够快

  2. 高度?定制性,?置?数完善

于是,我打算?用图片处?界?,采用CSS3?级处?,?文件,HTML模?和CSS采用动?注入的方?。

完整代?(16KB):jquery.DatePicker.js(未压缩),完善的?置?数

完整DEMO地?:DatePicker

一个简?DEMO:



window.onload = function(){
	$.getScript('/Lab/DatePicker/jquery.DatePicker.js', function(){
		$('#date_picker_demo').datePicker({
			followOffset : [0, 24]
		})
		.focus();
	});
}

其实,说?那是相对于 JQuery UI那样的笨?的?件?说的,本?以为?用多少代?就?以?定了,没想到写?写?就 16KB 了。

 

11评论

  1. ?常滴?错

    回?

  2. 想询问下这个js文件调用对jquery有什么?求么
    我引入jquery-1.7.min.js和
    jquery-1.7.js
    页?报对象?支?此属性或方法

    原先使用的时间空间是jquery-ui-1.8.2.coustom.min.js
    中的Datepicker

    laoshu133 于 2013-1-4 21:50:42 回?
    @marczhong
    ?时引入jquery-1.7.min.js和/Lab/DatePicker/jquery.DatePicker.min.js就?以用了

    回?

  3. 体积?大

    回?

  4. 例如默认值为2010-11,点击时默认选中这个时间

    laoshu133 于 2014-4-8 17:15:20 回?
    @?始化默认值年月

    以下两?方??以实现默认值

    ```
    $('#picker_2').val('2012-12-12').datePicker({followOffset:[0, 24]});
    //$('#picker_2').val('2012-12-12').datePicker({followOffset:[0, 24], defaultDate:'2012-12-12'});
    ```

    回?

  5. 请问怎么一进入到页?就显示在div里??

    laoshu133 于 2014-9-12 15:51:14 回?
    @rencai
    jQuery(function($) {
    $('#div1').datePicker();
    });
    于 2014-9-12 15:57:59 回?
    @rencai
    我试了都没显示啊,
    $(function () {
    $('#div_time').datePicker();

    });
    页?:
    <div id="div_time" style=" width:200px; height:50px; border:1px solid red;">

    </div>
    laoshu133 于 2014-9-12 16:03:35 回?
    @rencai
    $('#DIV1').datePicker().attr('tabIndex', -1).focus()
    于 2014-9-12 16:13:02 回?
    @rencai
    噢..还是?focus()事件去触?,谢谢?
    rencai 于 2014-9-12 16:32:47 回?
    @rencai
    这样还?以指定onselect的回调函数??
    laoshu133 于 2014-9-12 16:38:10 回?
    @rencai
    $('#DIV1').datePicker({
    onselect: function(date, altDate) { console.log(date, altDate); }
    })
    .attr('tabIndex', -1).focus()
    于 2014-9-12 17:15:04 回?
    @rencai
    autoHide : false,
    //是?自动??,如果为 true,当触? document的click时,会自动??
    这个属性设置的?是选中以??????控件的??为什么我设置了false还是会???我怎么让这个控件选中以?????
    laoshu133 于 2014-9-12 21:22:34 回?
    @rencai
    这个需求在之?开?期间未考虑,?求?严的??以按如下方?处?:
    var showTimer;
    $('#picker_1').datePicker({
    onselect: function() {
    var self = this;

    clearTimeout(showTimer);
    showTimer = setTimeout(function(){
    self.show();
    }, 0);
    }
    });
    laoshu133 于 2014-10-10 10:49:44 回?
    @rencai
    此问题已修?,请更新使用;添加?置 `autoHide:false` ,?考demo 2
    于 2014-10-11 14:15:36 回?
    @laoshu133
    ?常感谢?

    回?

  6. 如果?时有两个日期控件,选中一个,?选中一个。两个日期控件都还存在。怎么去掉第一个控件

    laoshu133 于 2014-10-10 10:59:09 回?
    @jk23it
    这个是BUG,现已修?,请更新代?使用
    jk23it 于 2014-10-10 11:23:46 回?
    ?常感谢?顺便一??,用此控件过程中?现IE6和??样?会有问题,我自己修改了样?,?以兼容IE,??和谷歌。有需?的?以和我说一下,大家?以交?下。邮箱:1459275614@QQ.com

    回?

  7. 这个?件放到input上 会影?input的blur事件 input的blur事件在选完日期?没??应 需?二次点击input blur?有效果

    jk23it 于 2015-1-21 21:54:54 回?
    @mou
    确实是这样?的,最好是选中?能focus到原input框,?过?懂得怎么写
    laoshu133 于 2015-1-22 11:02:15 回?
    @mou
    此问题已修正,目?此项目已?移至 github: https://github.com/laoshu133/DatePicker,欢迎 issue, star ;
    近期还会放出第二版,功能强大,且支?时间选择

    回?

  8. 控件很棒。?是在jquery的弹出窗?中使用时,datepicker会显示在弹出window的??,被window?挡?,请问该如何解决。

    laoshu133 于 2015-10-1 0:32:55 回?
    @sunnydeng
    建议自己通过CSS设置一个较高的 z-index ; 例如: .date_picker{ z-index: 999; }

    回?

  9. DatePicker实在是太好用了,
    如何用CSS在整站?一页?中调用呀,太多了一个个写代?工作?太大了,谢谢?
    $('input.picker_1').datePicker({followOffset : [0, 24]});这样写?行

    input type="text" name="" id="picker_1" class="picker_1"
    input type="text" name="" id="picker_22" class="picker_1"

    回?

  10. 如何用一个CSS整站调用,给点??示?

    回?

  11. 等?用呢,大大,或?有?验的朋?给点??示?,谢谢

    回?

?表评论

最新评论?回?

    loading

最近?表

    loading

网站分类

    loading

文章归档

    loading

?情链接

Top Comments Footer