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>
比较完善的代码3：
默认输入的框为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>
代码4：实现check_in和check_out总是间隔一天，check_out不能选择小于check_in的日期。
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 4 <title>jquery ui widgets-datepicker</title> 5 <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" /> 6 <script type="text/javascript" src="js/jquery-1.9.1.js"></script> 7 <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script> 8 <script type="text/javascript"> 9 $(function(){ 10 Array.prototype.in_array = function(e){ 11 for(i=0;i<this.length;i++){ 12 if(this[i] == e) 13 return true; 14 } 15 return false; 16 } 17 var no_room_date=new Array(); 18 __(foreach from=$no_room_date key=i item=myday)__ 19 no_room_date[__($i)__]="__($myday)__"; 20 __(/foreach)__ 21 var obj; 22 23 $('#check_in').focusin(function(){ 24 obj = $(this); 25 }) 26 27 $('#check_out').focusin(function(sel_date){ 28 obj = $(this); 29 }) 30 31 $('#datepicker').datepicker({ 32 minDate : new Date(), 33 maxDate : "__($maxdate)__", 34 dateFormat : "yy-mm-dd", 35 beforeShowDay:function(date){ 36 var result=new Array(); 37 result[0]="true"; 38 result[1]=""; 39 var nowmonth= parseInt(date.getMonth())+1; 40 var nowday=date.getDate(); 41 if (nowmonth<10){ 42 nowmonth="0"+nowmonth; 43 } 44 if(nowday<10){ 45 nowday="0"+nowday; 46 } 47 var nowdate=date.getFullYear()+"-"+ nowmonth+"-"+nowday; 48 if(no_room_date.in_array(nowdate)){ 49 result[0]=false; 50 } 51 if(nowdate==$("#check_in").val()){ 52 result[1]="red" 53 } 54 if(nowdate==$("#check_out").val()){ 55 result[1]="red" 56 } 57 if(nowdate>$("#check_in").val()&&nowdate<$("#check_out").val()&&(!no_room_date.in_array(nowdate))){ 58 //alert(nowdate+" "+$("#check_in").val()+" "+$("#check_out").val()); 59 result[1]="F06"; 60 } 61 return result; 62 }, 63 onSelect : function(dateText,inst){ 64 if(!obj) 65 { 66 obj = $('#check_in'); 67 $('#datepicker').datepicker('option','minDate',get_next_date(dateText)); 68 } 69 obj.val(dateText); 70 if(obj.attr("name")=="check_in"){ 71 $('#datepicker').datepicker('option','minDate',get_next_date(dateText)); 72 $('#check_out').focusin(); 73 }else{ 74 $('#check_in').focusin(); 75 $('#datepicker').datepicker("minDate" ,get_next_day($('#check_in').val())) 76 77 } 78 } 79 }); 80 }) 81 function get_next_date(str_date){ 82 var d=""; 83 d=new Date(str_date); 84 d.setDate(d.getDate()+1); 85 var y=d.getFullYear(); 86 var m=d.getMonth()+1; 87 var dd=d.getDate() < 10?'0'+parseInt(d.getDate()):parseInt(d.getDate()); 88 return y+"-"+m+"-"+dd; 89 } 90 </script> 91 </head> 92 <body> 93 <table> 94 <tr> 95 <td>CHECK IN:</td> 96 <td><input type="text" name="check_in" id="check_in" value="2014-03-18" /></td> 97 </tr> 98 <tr> 99 <td>CHECK OUT:</td> 100 <td><input type="text" name="check_out" id="check_out" value="2014-03-26" /></td> 101 </tr> 102 </table> 103 <div id="datepicker"></div> 104 </body> 105 </html> 106