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

DatePicker - 基于jQuery 的日期选择控件

laoshu133 Javascript 11评论 Jul 30

�?�?久因为公�?�活动需求，需�?一个简�?�的日期选择控件，而且时效性�?是很短，所以�?想去用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 了。

Tags:DatePicker Javascript

上一篇：基于给定路径求相对路径

下一篇：JPG�?进 & PNG/PNG24 交错测试

共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
laoshu133 于 2013-1-4 21:50:42 回�?
@marczhong
�?�时引入jquery-1.7.min.js和/Lab/DatePicker/jquery.DatePicker.min.js就�?�以用了

回�?
sp42说：

于 2014-2-2 20:34:59 #

体积�?大

回�?
�?始化默认值年月说：

于 2014-3-31 21:07:21 #

例如默认值为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'});
```

回�?
rencai说：

于 2014-9-12 15:48:10 #

请问怎么一进入到页�?�就显示在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
�?�常感谢�?

回�?
jk23it说：

于 2014-10-10 9:57:14 #

如果�?�时有两个日期控件，选中一个，�?选中一个。两个日期控件都还存在。怎么去掉第一个控件
laoshu133 于 2014-10-10 10:59:09 回�?
@jk23it
这个是BUG，现已修�?，请更新代�?使用
jk23it 于 2014-10-10 11:23:46 回�?
�?�常感谢�?顺便一�??，用此控件过程中�?�现IE6和�?��?样�?会有问题，我自己修改了样�?，�?�以兼容IE，�?��?和谷歌。有需�?的�?�以和我说一下，大家�?�以交�?下。邮箱：1459275614@QQ.com

回�?
mou说：

于 2014-10-21 11:10:48 #

这个�?�件放到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 ；
近期还会放出第二版，功能强大，且支�?时间选择

回�?
sunnydeng说：

�� 2015-9-30 13:27:28 #

控件很棒。�?�是在jquery的弹出窗�?�中使用时，datepicker会显示在弹出window的�?��?�，被window�?�挡�?，请问该如何解决。
laoshu133 于 2015-10-1 0:32:55 回�?
@sunnydeng
建议自己通过CSS设置一个较高的 z-index ；例如： .date_picker{ z-index: 999; }

回�?
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 #

等�?�用呢，大大，或�?�有�?验的朋�?�给点�??示�?�，谢谢

回�?

_米空格

DatePicker - 基于jQuery 的日期选择控件

相关文章

共11评论

�?�表评论

最新评论�?�回�?

最近�?�表

网站分类

文章归档

�?�情链接