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" />
代码二：
一般的使用情况下，我自认为只要有一个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>
比较完善的代码：
默认输入的框为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>