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