jquery.datepick使用

淳于飞文
2023-12-01
在项目开发中经常用到日期选择控件,基于jquery的日期控件jquery.datepick使用配置起来很方面灵活,此控件支持多语言,兼容多种浏览器材,支持jquery的validate,有多种样式供选择....
1.官方下载地址:[url]http://keith-wood.name/datepick.html[/url] 有详细的demo和参数说明及validate和其他一些特效演示
2.下载jquery.datepick.package-4.0.3后解压
2.1有3个gif图片,这3个图片是点击按钮弹出日期控件的按钮效果图片,你可以自定义按钮图片,也可以不用按钮,直接点击input时弹出
2.2有3个自带样式供选择,使用不同的样式弹出的日期控件效果不一样。
2.3jquery.datepick.js这个是最重要的js必须引入,还有压缩版jquery.datepick.pack.js的和最小版jquery.datepick.min.js,一般不需要特别效果引入jquery.datepick.min.js即可
2.4jquery.datepick.validation.js这个是在做日期验证时才用,当然还有压缩版和最小版供选择
2.5jquery.datepick-zh-CN.js简体中文资源文件,可以不引,默认提示和显示就是英文,也可以在页面datepick参数中定义中文显示文字及提示信息,建议直接引入jquery.datepick-zh-CN.js文件。
3.一般情况小引入jquery.datepick.min.js、jquery.datepick.css、jquery.datepick-zh-CN.js这三个文件即可,当然必须引入jquery-1.4.2.js(jquery低版本可能不兼容)
4.重要参数介绍
$('#startTime').datepick({
showOnFocus: true,
firstDay: 0,
rangeSelect: true,
monthsToShow: 2,
yearRange: '-10:+10',
dateFormat: 'yyyy-mm-dd',
minDate: new Date(2007, 1 - 1, 1),
maxDate: new Date(2009, 1 - 1, 1)
});
4.1 startTime这个是input的id。默认是onfocus时弹出日期控件,不是onclick。showOnFocus参数默认为true,如果配置为false,是触发不了日期控件的。
4.2 firstDay星期的第一天设置。默认是星期日,设置为0或者7都是星期日,设置为1是星期一,设置为2是星期二....
4.3 rangeSelect 多选设置。默认为false,设置为true时可以选择一个日期段,开始日期至结束日期
4.4 monthsToShow 显示弹出多个日期控件供选择。2就是显示同时弹出2个日期控件,这个参数必须配合rangeSelect一起使用,rangeSelect 为true才起作用
4.5 yearRange 设置年的选择范围。-10:+10表示以现在年为标准,可选前10年后10年的日期,当然还有其他一些设置技巧,可参考官方demo
4.6 dateFormat 日期格式化。可参考官方demo
4.7 minDate 日期控件显示的最小日期。其他技巧可参考官方demo
4.8 maxDate 日期控件显示的最大日期。其他技巧可参考官方demo
5.开始日期结束日期大小限制
function customRange(dates) {
if (this.id == 'startTime') {
$('#endTime').datepick('option', 'minDate', dates[0] || null);
}
else {
$('#startTime').datepick('option', 'maxDate', dates[0] || null);
}
}

$(document).ready(function() {
$('#startTime,#endTime').datepick({
yearRange: '-10:+10',
dateFormat: 'yyyy-mm-dd',
minDate: new Date(),
onSelect: customRange
});
});
 类似资料: