前不久因为公司活动需求,需要一个简单的日期选择控件,而且时效性不是很短,所以不想去用JQuery UI那样笨重的日期选择插件,于是就有了今天这篇:
首先从需求角度出发,我们对日期要求不高,比如不要求一定要有明确的星期几,不要求有明确的用户输入日期;但是要求:
体积够小,速度够快
高度可定制性,配置参数完善
于是,我打算不用图片处理界面,采用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评论
小茗说:
于 2012-12-25 16:04:39 #
非常滴不错
回复
marczhong说:
于 2013-1-4 16:55:25 #
想询问下这个js文件调用对jquery有什么要求么
我引入jquery-1.7.min.js和
jquery-1.7.js
页面报对象不支持此属性或方法
原先使用的时间空间是jquery-ui-1.8.2.coustom.min.js
中的Datepicker
回复
sp42说:
于 2014-2-2 20:34:59 #
体积稍大
回复
初始化默认值年月说:
于 2014-3-31 21:07:21 #
例如默认值为2010-11,点击时默认选中这个时间
回复
rencai说:
于 2014-9-12 15:48:10 #
请问怎么一进入到页面就显示在div里面?
回复
jk23it说:
于 2014-10-10 9:57:14 #
如果同时有两个日期控件,选中一个,再选中一个。两个日期控件都还存在。怎么去掉第一个控件
回复
mou说:
于 2014-10-21 11:10:48 #
这个插件放到input上 会影响input的blur事件 input的blur事件在选完日期后没反应 需要二次点击input blur才有效果
回复
sunnydeng说:
�� 2015-9-30 13:27:28 #
控件很棒。只是在jquery的弹出窗口中使用时,datepicker会显示在弹出window的后面,被window遮挡住,请问该如何解决。
回复
hp3325说:
于 2016-2-14 20:05:26 #
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"
回复
hp3325说:
于 2016-3-1 18:55:41 #
如何用一个CSS整站调用,给点提示吧
回复
hp3325说:
于 2016-3-2 14:15:39 #
等着用呢,大大,或着有经验的朋友给点提示吧,谢谢
回复