jquery ui datepicker起始日期与结束日期的校验

1.引言

之前做的一个项目中用到jquery datepicker,看了一些网上的例子，但是不够完整。

http://blog.csdn.net/redarmy_chen/article/details/7400723

这是类似的例子，但是不够完整，dateText类型为Date,如何构造Date查阅的w3c的javascript API,设置开始日期与结束日期只能一步步来

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

3.定义开始日期与结束日期

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.相关链接

http://api.jqueryui.com/datepicker/#option-showButtonPanel
http://blog.csdn.net/redarmy_chen/article/details/7400723
http://www.w3school.com.cn/js/jsref_obj_date.asp