jquery ui widgets-datepicker

浏览数：29 / 时间：2015年06月09日

jquery ui的用法就不在此讲述，直接进入jquery ui的窗体小部件(widgets)——datepicker。

相信很多像我这样子的菜鸟少年，如果同一个页面上有两个input文本输入框是用来输入日期的话，那么我都是直接给这两个input文本输入框一个id，然后使用这两个id来进行datepicker的初始化设置。

一般情况下，我都是按照下面的代码写的，但是慢慢地发现，老是这样子写多麻烦呀！难道就不能只使用一个div来加载一个query ui的datepicker吗？然后两个或者多个input共用这一个日历来获取值。于是，就产生了与这下面代码的另一段代码。我知道我是菜鸟，所以也是写给菜鸟看的，欢迎高手指点,不甚感激!

代码一：

 1 1 <!--加载jquery,jquery ui的css文件以及js文件省略-->
 2  2 <script type="text/javascript">
 3  3     $(‘#check_in‘).datepicker({
 4  4        minDate : new Date(),
 5  5       dateFormat : ‘yy-mm-dd‘,
 6  6       onSelect   : function(dateText,inst){
 7  7           $(‘#check_in‘).val(dateText);
 8  8         }  
 9  9     });
10 10 
11 11      $(‘#check_out‘).datepicker({
12 12        minDate : new Date(),
13 13       dateFormat : ‘yy-mm-dd‘,
14 14       onSelect   : function(dateText,inst){
15 15           $(‘#check_out‘).val(dateText);
16 16         }  
17 17     });
18 18 
19 19   $(‘#check_in‘).focusin(function(){
20 20       ......
21 21    //具体操作不写
22 22   });
23 23 
24 24  $(‘#check_out‘).focusin(function(){
25 25     ......
26 26    //具体操作不写
27 27   })
28 28 
29 29 </script>
30 30 
31 31 <input type="text" name="check_in" id="check_in" />
32 32 <input type="text" name="check_out" id="check_out" />

View Code

代码二：

一般的使用情况下，我自认为只要有一个datepicker就足够了。除非你的每个输入框要求的日期时间格式要求差异化了，不过相信这种需求很少的。既然这样子的话，那么我们就完全可以使用一个datepicker，配合datepicker的Function option实现动态化的参数配置。例如：当你第一个日期选定之后，那么第二个日期的minDate肯定就是从当前选定日期的下一天开始，2014-03-17[日期1]，那么日期2就当然是从2014-03-18开始了。请看简单的代码：

 1  1 <html>
 2  2     <head>
 3  3         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 4  4         <title>jquery-ui-datepicker</title>
 5  5         <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" />
 6  6         <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
 7  7         <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
 8  8         <script type="text/javascript">
 9  9             $(function(){
10 10             var obj;
11 11                 $(‘#check_in‘).focusin(function(){                
12 12                     obj = $(this);
13 13                 })
14 14                 
15 15                 $(‘#check_out‘).focusin(function(sel_date){
16 16                     obj = $(this);
17 17                 })
18 18                 //the common datepicker widget‘code is here. 
19 19                 $(‘#datepicker‘).datepicker({
20 20                     minDate : new Date(),
21 21                     dateFormat : "yy-mm-dd",
22 22                     onSelect   : function(dateText,inst){
23 23                         obj.val(dateText);
24 24                         alert(inst)
25 25                     }
26 26                 });
27 27                 
28 28             })
29 29         </script>
30 30     </head>
31 31     <body>
32 32         <table>
33 33             <tr>
34 34                 <td>CHECK IN</td>
35 35                 <td>:</td>
36 36                 <td><input type="text" name="check_in" id="check_in" /></td>
37 37             </tr>
38 38             <tr>
39 39                 <td>CHECK OUT</td>
40 40                 <td>:</td>
41 41                 <td><input type="text" name="check_out" id="check_out" /></td>
42 42             </tr>
43 43         </table>
44 44         <div id="datepicker"></div>
45 45     </body>
46 46 </html>

View Code

比较完善的代码：

默认输入的框为check_in，即使在用户没有点击check_in input输入框时 -> 当check_in输入框输入之后，自动跳转到check_out输入框 -> 再次点击日历，默认的输入框则变成为check_in。自动乱转。

 1 <html>
 2     <head>
 3         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 4         <title>jquery-ui-datepicker</title>
 5         <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" />
 6         <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
 7         <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
 8         <script type="text/javascript">
 9             $(function(){
10             var obj;
11                 $(‘#check_in‘).focusin(function(){                
12                     obj = $(this);
13                 })
14                 
15                 $(‘#check_out‘).focusin(function(sel_date){
16                     obj = $(this);
17                 })
18 
19                 $(‘#datepicker‘).datepicker({
20                     minDate : new Date(),
21                     dateFormat : "yy-mm-dd",
22                     onSelect   : function(dateText,inst){
23                         if(!obj)
24                         {
25                             obj = $(‘#check_in‘);
26                         }
27                         obj.val(dateText);
28                         if(obj.attr("name")=="check_in"){
29                             $(‘#check_out‘).focusin();
30                         }else{
31                             $(‘#check_in‘).focusin();
32                         }
33                     }
34                 });
35                 
36             })
37         </script>
38     </head>
39     <body>
40         <table>
41             <tr>
42                 <td>CHECK IN</td>
43                 <td>:</td>
44                 <td><input type="text" name="check_in" id="check_in" /></td>
45             </tr>
46             <tr>
47                 <td>CHECK OUT</td>
48                 <td>:</td>
49                 <td><input type="text" name="check_out" id="check_out" /></td>
50             </tr>
51         </table>
52         <div id="datepicker"></div>
53     </body>
54 </html>