jquery UI datepicker時間控件的使用

參考：

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