今天看某公司的网页，其中有个筛选条件是选择一个时间区间，从而选择出符合条件的项。什么也不说了，先看图左边的输入框，点击具体的日期，这里我选择的是2017-3-9，然后右边的输入框就只能选择这个日期以后的了，这点还是非常的人性化的，然后我就追根溯源，找到了这是Jquery Ui的组件。datapicker，这里就不详细的介绍了，菜鸟教程一大堆。我就简单的说一下用法：
1 <script> 2 $(function() { 3 $( "#from" ).datepicker({ 4 defaultDate: "+1w", 5 changeMonth: true, 6 numberOfMonths: 1, 7 minDate:0, 8 dateFormat:"yy-mm-dd", 9 onClose: function( selectedDate ) { 10 $( "#to" ).datepicker( "option", "minDate", selectedDate ); 11 } 12 }); 13 $( "#to" ).datepicker({ 14 defaultDate: "+1w", 15 changeMonth: true, 16 numberOfMonths: 1, 17 onClose: function( selectedDate ) { 18 $( "#from" ).datepicker( "option", "maxDate", selectedDate ); 19 } 20 }); 21 }); 22 </script>
html：
<label for="from">从</label> <input type="text" id="from" name="from"> <label for="to">到</label> <input type="text" id="to" name="to">
defaultDate指的是默认的时间，是从当前的日期最多能选择的时间；
changeMonth是否能更换月份，true是能更换；
numberOfMonths显示几个月份，后面跟的是数字，表示显示几个月的，最小是1，如果是0，那就什么也看不到了；
dateFormat值得是选择完日期后，输入框中需要显示的让日期的格式；
onClose这是最重要的了，这里就能看出来为什么第二个的日期选择输入框只能选择上个输入框以后的日期了。
minDate的意思的是能选择的最小日期，距离今天的时间跨度。
在表示时间跨度中使用‘+-’表示是向前还是向后，w表示周 d表示天 m表示月 y表示年；
最后附上菜鸟的url，感兴趣的可以去看看点我
