JS 关联日期选择范围的限制

 在日期选择控件上,我一直使用之前项目组长推荐的 My97DatePicker 今天使用了一个它在日期选择上比较好的功能.

 

就是朋友 做酒店订房系统， 想要修改 日期控件 入住日期 和 退房日期的选择范围.

 

 

但是要求选择了入住日期之后, 退房日期范围也要随即变化,在入住日期 X 天之后。

 

My97 可以调用函数的方式来设定 日期选择范围 。

 

 

入住日期<input name="checkin" type="text" id="checkin" class="Wdate"  οnfοcus="WdatePicker({lang:'en',skin:'whyGreen',minDate:'<%=CDate(dateArr(0))%>',maxDate:'<%=CDate(dateArr(1))%>'})" value="<%=CDate(dateArr(0))%>" />



退房日期<input name="checkout" type="text" id="checkout" class="Wdate"  οnfοcus="WdatePicker({lang:'en',skin:'whyGreen',minDate:'#F{getChkin()}',maxDate:'<%=DateAdd("d",stayDays,CDate(dateArr(1)))%>'})" value="<%=DateAdd("d",stayDays,CDate(dateArr(0)))%>" />

 

 

这里，我使用一个函数 getChkin() 来计算退房日期。 这样调用的：#F{getChkin()}

 

 

此外，还要考虑到几个 问题：

1. 日期选择， 格式化的 问题 。

 

我参考扩展JS 日期类的代码：

						
							/*
							 * 日期格式化方法
							 */
							Date.prototype.format = function(mask) {   
							  
								var d = this;   
							  
								var zeroize = function (value, length) {   
							  
									if (!length) length = 2;   
							  
									value = String(value);   
							  
									for (var i = 0, zeros = ''; i < (length - value.length); i++) {   
							  
										zeros += '0';   
							  
									}   
							  
									return zeros + value;   
							  
								};     
							  
								return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function($0) {   
							  
									switch($0) {   
							  
										case 'd':   return d.getDate();   
							  
										case 'dd':  return zeroize(d.getDate());   
							  
										case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];   
							  
										case 'dddd':    return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];   
							  
										case 'M':   return d.getMonth() + 1;   
							  
										case 'MM':  return zeroize(d.getMonth() + 1);   
							  
										case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];   
							  
										case 'MMMM':    return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];   
							  
										case 'yy':  return String(d.getFullYear()).substr(2);   
							  
										case 'yyyy':    return d.getFullYear();   
							  
										case 'h':   return d.getHours() % 12 || 12;   
							  
										case 'hh':  return zeroize(d.getHours() % 12 || 12);   
							  
										case 'H':   return d.getHours();   
							  
										case 'HH':  return zeroize(d.getHours());   
							  
										case 'm':   return d.getMinutes();   
							  
										case 'mm':  return zeroize(d.getMinutes());   
							  
										case 's':   return d.getSeconds();   
							  
										case 'ss':  return zeroize(d.getSeconds());   
							  
										case 'l':   return zeroize(d.getMilliseconds(), 3);   
							  
										case 'L':   var m = d.getMilliseconds();   
							  
												if (m > 99) m = Math.round(m / 10);   
							  
												return zeroize(m);   
							  
										case 'tt':  return d.getHours() < 12 ? 'am' : 'pm';   
							  
										case 'TT':  return d.getHours() < 12 ? 'AM' : 'PM';   
							  
										case 'Z':   return d.toUTCString().match(/[A-Z]+$/);   
							  
										// Return quoted strings with the surrounding quotes removed   
							  
										default:    return $0.substr(1, $0.length - 2);   
							  
									}   
							  
								});   
							};  

 

 

这样，可以使用 Date.format("yyyy-MM-dd"); 的形式来 格式化日期字符串了。

 

JS 的日期构造函数 不支持 new Date("yyyy-MM-dd") 只能使用 new Date("yyyy/MM/dd")   后面我们用正则替换下 即可  replace(/-/g, "/")  。

 

2. 日期计算的问题。

 

使用 Date.setDate(Date.getDate() + X) 的方式来 加 X 天。

function getChkin(){
								var sdate = document.getElementById("checkin").value;
								sdate = new Date(sdate.replace(/-/g, "/"));
								sdate.setDate(sdate.getDate()+<%=stayDays%>);
								return sdate.format("yyyy-MM-dd");
							}