1.引言

之前做的一個專案中用到jquery datepicker,看了一些網上的例子，但是不夠完整。

這是類似的例子，但是不夠完整，dateText型別為Date,如何構造Date查閱的w3c的javascript API,設定開始日期與結束日期只能一步步來

2.引入jquery-us.css,jquery-ui.js

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 

3.定義開始日期與結束日期

<input type="text" readonly="readonly" placeholder="0000-00-00"【1】 name="startDate" id="startDate" class="in-put datepicker" value="" />
<input type="text" readonly="readonly" placeholder="0000-00-00" name="endDate" id="endDate" class="in-put datepicker" value="" />

4.設定datepicker

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

5.設定startDate的datepicker,其中包括onselect事件

$("#startDate").datepicker({  
	        onSelect:function(startText,endText){
	        	endText=$('#endDate').val();
	        	if(endText!=''){
	        		startText=$('#startDate').val();
	        		if(startText!=''){
		        		var start=new Date();【4】
	        			var start_month=parseInt(startText.substring(5,7))-1;【5】
	        			start.setFullYear(startText.substring(0,4));【6】
	        			start.setMonth(start_month);
	        			start.setDate(startText.substring(8,10));
	        			
	        			var end=new Date();
	    				var end_month=parseInt(endText.substring(5,7))-1;
	    				end.setFullYear(endText.substring(0,4));
	    				end.setMonth(end_month);
	    				end.setDate(endText.substring(8,10));
	    				
	 	       			$('#endDate').datepicker('option','minDate',start);【7】
	        		}
	        	}
	        }  
	    }); 
 

6.設定endDate的datepicker,類似第4點

$("#endDate").datepicker({
            onSelect:function(startText,endText){
                startText=$('#startDate').val();    
                if(startText!=''){
                    endText=$('#endDate').val();
                    if(endText!=''){
                        var end=new Date();
                        var end_month=parseInt(endText.substring(5,7))-1;
                        end.setFullYear(endText.substring(0,4));
                        end.setMonth(end_month);
                        end.setDate(endText.substring(8,10));
                        
                        var start=new Date();
                        var start_month=parseInt(startText.substring(5,7))-1;
                        start.setFullYear(startText.substring(0,4));
                        start.setMonth(start_month);
                        start.setDate(startText.substring(8,10));
                        
                        $('#startDate').datepicker('option','maxDate',end);【8】
                    }
                }
            } 
        });

7.PS（附註）

【1】placeholder為html5的新特性，作用是在輸入框中顯示提示資訊
【2】清除時間的顯示文字，貌似不起作用，本來想設定清除當前輸入的時間，datepicker的api貌似沒有這個設定
【3】清除的狀態，同【2】，也不起作用
【4】javascript的Date類似，沒有構造方法，所以設定時間只能通過對應的setter方法
【5】這裡要注意一下月份是從0開始的，即0~11
【6】推薦用setFullYear(year)，而不是setYear(year)
【7】在開始日期中選擇了日期後，設定結束日期的最小日期為當前選擇的開始日期，效果為當你設定了開始日期後，選擇結束日期時小於開始日期的均不可點選
【8】同樣的，在選擇了結束日期後，設定開始日期的最大日期為當前選擇的結束日期，效果為當你設定了結束日期後，選擇的開始日期大於結束日期的均不可點選

8.相關連結