参考:
http://api.jqueryui.com/datepicker/#method-show 英文
http://www.helloweba.com/view-blog-168.html 中文
http://jqueryui.com/datepicker/
效果:
常用场合:
1.输入框
2.div
使用方法:
1.限制日期
$("#resultDiv").datepicker({
onSelect: function (dateText, inst) {
//代码:选择日期后触发的事件
},
minDate: new Date(),//最小日期
maxDate: new Date($("#DateLimit").val())//最大日期
});
2.中文
jQuery(function ($) {
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
'七月', '八月', '九月', '十月', '十一月', '十二月'],
monthNamesShort: ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '十一', '十二'],
dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'
};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});
3.时间段查询用法
$(document).ready(function () {
$('#SearchStartDT').datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (startDate) {
var $startDate = $("#SearchStartDT");
var $endDate = $('#SearchEndDT');
var endDate = $endDate.datepicker('getDate');
if (endDate < startDate) {
$endDate.datepicker('setDate', startDate - 3600 * 1000 * 24);
}
$endDate.datepicker("option", "minDate", startDate);
}
});
$('#SearchEndDT').datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function (endDate) {
var $startDate = $("#SearchStartDT");
var $endDate = $('#SearchEndDT');
var startDate = $startDate.datepicker("getDate");
if (endDate < startDate) {
$startDate.datepicker('setDate', startDate + 3600 * 1000 * 24);
}
$startDate.datepicker("option", "maxDate", endDate);
}
});
$("#SearchStartDT").datepicker("option", "maxDate", new Date());
$("#SearchEndDT").datepicker("option", "maxDate", new Date());
});
4.只显示月份
多种解决方法:http://www.itstrike.cn/Question/c7c3214d-0a6b-4d89-8b4f-f7753763e927.html