datepicker约束开始时间和结束时间

datepicker约束开始时间和结束时间作用就是：选择要搜索的日期范围。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
 7     <script type="text/javascript" src="js/jquery.min.js"></script>
 8     <script type="text/javascript" src="js/jquery-ui.js"></script>
 9 </head>
10 <body>
11 <label for="from">从</label>
12 <input type="text" id="from" name="from">
13 <label for="to">到</label>
14 <input type="text" id="to" name="to">
15 </body>
16 </html>
17 <script type="text/javascript">
18     $(function() {
19         $( "#from" ).datepicker({
20             changeMonth: false,
21             minDate:'2016-06-03',
22             maxDate: new Date(),
23             dateFormat: 'yy-mm-dd',
24             beforeShowDay: $.datepicker.noWeekends,
25             onClose: function( selectedDate ) {
26                 $( "#to" ).datepicker( "option", "minDate", selectedDate );
27             }
28         });
29         $( "#to" ).datepicker({
30             changeMonth: false,//月份不可选择
31             minDate:'2016-06-03',//最小日期
32             maxDate: new Date(),//最大日期
33             dateFormat: 'yy-mm-dd',//日期格式
34             beforeShowDay: $.datepicker.noWeekends,//周末不可选
35             onClose: function( selectedDate ) {
36                 $( "#from" ).datepicker( "option", "maxDate", selectedDate );
37             }
38         });
39     });
40 </script>

效果截图：

posted @ 2016-06-23 15:27  SkyTeam_LBM  阅读(991)  评论(0)  编辑  收藏  举报