Jquery 日期選擇

標籤：

1、首先將Jquery中的datepicker外掛程式中的相關屬性值改成中文的：

$.datepicker.regional[‘zh-CN‘] = {         clearText: ‘清除‘,         clearStatus: ‘清除已選日期‘,         closeText: ‘關閉‘,         closeStatus: ‘不改變當前選擇‘,         prevText: ‘<上月‘,         prevStatus: ‘顯示上月‘,         prevBigText: ‘<<‘,         prevBigStatus: ‘顯示上一年‘,         nextText: ‘下月>‘,         nextStatus: ‘顯示下月‘,         nextBigText: ‘>>‘,         nextBigStatus: ‘顯示下一年‘,         currentText: ‘今天‘,         currentStatus: ‘顯示本月‘,         monthNames: [‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘, ‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘],         monthNamesShort: [‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘, ‘七‘,‘八‘,‘九‘,‘十‘,‘十一‘,‘十二‘],         monthStatus: ‘選擇月份‘,         yearStatus: ‘選擇年份‘,         weekHeader: ‘周‘,         weekStatus: ‘年內周次‘,         dayNames: [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘],         dayNamesShort: [‘周日‘,‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘],         dayNamesMin: [‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],         dayStatus: ‘設定 DD 為一周起始‘,         dateStatus: ‘選擇 m月 d日, DD‘,         dateFormat: ‘yy-mm-dd‘,         firstDay: 1,         initStatus: ‘請選擇日期‘,         isRTL: false};        $.datepicker.setDefaults($.datepicker.regional[‘zh-CN‘]); 

2、html頁面中有兩個日期輸入框，分別為起始日期和結束日期：

<label for="start-datepicker">起始日期:</label> <input type="text" class="datepicker test-image-datepicker" id="start-datepicker" size="15" />&nbsp;&nbsp;                                            <label for="end-datepicker">結束日期:</label> <input type="text" class="datepicker test-image-datepicker" id="end-datepicker" size="15" />

3、調用修改後的datepicker外掛程式：

 var $start_date_value = "2012年1月1日"; // TODO  改成可以配置的    var $end_date_value = new Date();    // When document has loaded, initialize pagination and form     $(document).ready(function(){              $(".imagezz").click($test_image_check_box_click);                $( ".test-image-datepicker" ).datepicker({            changeMonth: true,            changeYear: true,            showOn: "both",            buttonImage: "images/calendar.gif",            buttonImageOnly: true,            showButtonPanel: true,            onSelect: function(dateText, inst){                            if ($(this).attr("id") == "start-datepicker") {                                $start_date_value = dateText;                            }                            if ($(this).attr("id") == "end-datepicker") {                                $end_date_value = dateText;                            }                            //下面可以寫一些根據日期變化引起頁面相關部分修改的函數                            //......                        }        });        $(".test-image-datepicker").datepicker("option", "dateFormat", "yy年mm月dd日");        $(‘.test-image-datepicker‘).attr("readonly","readonly");                $("#start-datepicker").datepicker("setDate",$start_date_value);        $("#end-datepicker").datepicker("setDate",$end_date_value);

 datepicker其餘選項及方法詳見：http://api.jqueryui.com/datepicker/

 

推薦一個自己業餘時間開發的網盤搜尋引擎，360盤搜（www.360panso.com）

Jquery 日期選擇