jquery 日历控件 范围 jquery日历插件代码

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

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

原网站给出的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]-->

 

如果有下拉菜单在日历控件下，这样再调用一行就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框时，是否显示日历控件， 其他更多参数，和更多调用方法（双日历，或者博客日历模式以及日期选择范围）大家可看原网站上的说明

 

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