JS 关联日期选择范围的限制
?在日期选择控件上,我一直使用之前项目组长推荐的 My97DatePicker 今天使用了一个它在日期选择上比较好的功能.
?
就是朋友 做酒店订房系统，?想要修改 日期控件 入住日期 和 退房日期的选择范围.
?
?
但是要求选择了入住日期之后, 退房日期范围也要随即变化,在入住日期 X 天之后。
?
My97 可以调用函数的方式来设定 日期选择范围 。
?
?
入住日期<input name="checkin" type="text" id="checkin" onfocus="WdatePicker({lang:'en',skin:'whyGreen',minDate:'<%=CDate(dateArr(0))%>',maxDate:'<%=CDate(dateArr(1))%>'})" value="<%=CDate(dateArr(0))%>" />退房日期<input name="checkout" type="text" id="checkout" onfocus="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");}?
?
?