jQuery.datePicker日历插件

此datePicker应非jQuery ui中的datepicker插件，名称上虽然只差一个字母的大小写。

jQuery ui中的datepicker嵌在整个ui里不太好用，本人系懒人一个，也不善于做剥离代码，说实话，我也不喜欢他收缩显示隐藏的方式，对这些效果真是感觉厌倦了，实用才是第一需要的，所以在网上搜搜寻寻，找到这个插件。

插件源地址：http://www.kelvinluck.com/assets/jquery/datePicker/

原网站给出的datePicker，其实包括两个js文件：datePicker.js与date.js，这个具体的看他原给出的示例就明白，我觉得影响调用，干脆就把2个合成一个（如果你自己从原网站上下要注意和我示例中的不同）。

然后把日历中的英文称改成中文(在函数的最上面，原脚本在date.js中设置)，又将Date.firstDayOfWeek=1改成0，把一周第一天为周一，改成周日，再稍微改改其他细节（相信有些脚本基础的都会改改）。

最后压缩了一下，由于源代码注解比较多，一压，原来2个文件加起来50多k，只剩下18k左右，哈哈。还有一个bgiframe脚本，由于日历插件在表单上应用比较多，就非常有可能有下拉菜单， 不用说，ie6的下拉菜单层级无人能敌问题是远近闻名。所以这里又附了一个 jquery.bgiframe.min.js 如示例中的源码：

 

<!--[if IE]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->

<!--[if ie=""><mce:script type="text/javascript" src="js/jquery.bgiframe.min.js" mce_src="js/jquery.bgiframe.min.js"></mce:script><![endif]-->

 

如果有下拉菜单在日历控件下，这样再调用一行就ok了。

原网站上的日历外观灰土土的，实在不适合网站上广泛使用，我根据需要改了下，淡蓝色感觉，希望大家喜欢，呵呵，如果个人有需求，直接可以改datePicker.css样式， datePicker在具体示例中的调用：

html:

 

< input type="text" name="it" class="date-pick it" />

 

 

js:

 

$(window).ready(function(){$('.date-pick').datePicker({clickInput:true});});

 

 

 

我写的：

js：

$(document).ready(init);


$('#strJcsj').DatePicker({
date: $('#strJcsj').val(),
current: $('#strJcsj').val(),
position: 'bottom',
onBeforeShow: function(){
if($('#strJcsj').val() == "" || $('#strJcsj').val() == null){
beforeDate = strNowDate;
}else{
beforeDate = $('#strJcsj').val();
}
$('#strJcsj').DatePickerSetDate(beforeDate, true);
},
onChange: function(formated, dates){
$('#strJcsj').val(formated);
if(beforeDate != $('#strJcsj').val()){
beforeDate = $('#strJcsj').val();
$('#strJcsj').DatePickerHide();
}
$("#strJcsj").valid();
}
});

 

 

jsp：

 

 

<s:textfield id="strJcsj" name="strJcsj" readonly="true"theme="simple" customFunction="checkJcsj"/>

 

 

clickInput 为选择参数，表示点击input框时，是否显示日历控件， 其他更多参数，和更多调用方法（双日历，或者博客日历模式以及日期选择范围）大家可看原网站上的说明，地址为： http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/

 

附：有一个小bug:当单选框里的日期为非法时，页面会报错，当然这是人有意测试脚本时才会去手动输入非法日期，一般浏览者都以方便直观的选择日期为主，也期待完美吧。（设置为readonly?）

点击下载此文件 ：http://www.cssrain.cn/attachments/month_0906/k2009629144950.rar

66推荐---

my97日历控件：my97主页：http://www.my97.net/dp/index.aspmy97

皮肤：http://www.cssrain.cn/article.asp?id=1343

 

转自：http://www.cnblogs.com/skyaspnet/archive/2010/07/21/1669675.html