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

最新推荐文章于 2022-08-22 18:29:58 发布

weixin_30614587

最新推荐文章于 2022-08-22 18:29:58 发布

阅读量279

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liubeimeng/p/5610975.html

版权

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>

效果截图：

转载于:https://www.cnblogs.com/liubeimeng/p/5610975.html

weixin_30614587

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
datepicker约束开始时间和结束时间

datepicker约束开始时间和结束时间作用就是：选择要搜索的日期范围。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <...
复制链接

扫一扫