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

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

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