我使用的日期選擇器(http://www.eyecon.ro/bootstrap-datepicker/)的引導插件。 當你去上面的鏈接有你如何使一個簡單的登記入住退房形式的代碼示例。在結帳日期選擇器上,所有在入住日期選擇器之前的日期都被禁用。引導日期選擇器 - 禁用日期 - 多datepickers
我的網站上有多個簽結賬形式(多個房間)。每個房間你有一個登記入住和退房datepicker(夫婦)。所以我想下面的代碼會做到這一點。
創建的頁面(其可以是可變的)上找到的所有datepickers的數組。然後循環遍歷數組,每對2 +應用代碼。
if ($('.datepicker').length) {
//get all the datepickers
var IDs = [];
$(".main").find(".datepicker").each(function(){ IDs.push(this.id); });
for(j=0;j<IDs.length;j++){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#'+ IDs[j]).datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
checkin.hide();
$('#'+ IDs[j+1])[0].focus();
}).data('datepicker');
var checkout = $('#'+ IDs[j+1]).datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
j++;
}
}
的outcoume是,如果我在頁面上2個datepickers第二個按預期工作。第一個根本沒有。如果我在它的工作頁面上有1個日期選擇器。
當添加警報(IDS),我得到的ID在被通緝的正確順序的數組。
如果任何人都可以幫助... :)在此先感謝!