jquery-ui datepicker 日期控件 日期区间选择

1. 依赖文件

jquery   , jquery-ui.min.css,jquery-ui.min.js

2. html

<div class="uiForm-group-right">
<label for="from" style="line-height: 42px;">从</label>
<input class="dataInput uiForm-element" type="text" id="fromData" name="fromData" readonly="readonly" required="required">
<label for="to" style="line-height: 42px;">到</label>
<input class="dataInput uiForm-element" type="text" id="toData" name="toData" readonly="readonly" required="required">
</div>

3. js

$( "#fromData" ).datepicker({
     language: 'cn',  //汉化
     changeMonth: true,
     minDate: 0,  //日期从当天开始
     numberOfMonths: 1, //显示月的数量
     dateFormat: "yy-mm-dd", //日期格式化
     onClose: function( selectedDate ) {
       $( "#toData" ).datepicker( "option", "minDate", selectedDate );//限制日期范围
     }
   });
   $( "#toData" ).datepicker({
     language: 'cn',
     minDate: 0,
     changeMonth: true,
     numberOfMonths: 1,
     dateFormat: "yy-mm-dd",
     onClose: function( selectedDate ) {
       $( "#fromData" ).datepicker( "option", "maxDate", selectedDate );
     }
   });