2013-10-04 73 views
0

我使用的日期選擇器(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在被通緝的正確順序的數組。

如果任何人都可以幫助... :)在此先感謝!

回答

0

我一直在這方面的工作,並認爲我會張貼的情況下,任何人都在尋找答案。

它通過尋找類'datepicker'的任何東西。如果該項目的ID以'from'結尾,它會查找ID爲'to'的相應項目。如果ID不以'from'或'to'結​​尾,它會綁定一個普通的日期選擇器。

我相信一個jQuery大師可以做的更好;-)

外部JS:

function datepickerFromTo(fromSelector, toSelector, format) { 
    var nowTemp = new Date(); 
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

    var fromDate = $(fromSelector).datepicker({ 
     weekStart: 1, 
     format: format, 
     onRender: function (date) { 
      return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
     } 
    }).on('show', function (ev) { 
     toDate.hide(); 
    }).on('changeDate', function (ev) { 
     if (ev.date.valueOf() > toDate.date.valueOf()) { 
      var newDate = new Date(ev.date) 
      newDate.setDate(newDate.getDate()); 
      toDate.setValue(newDate); 
     } 
     fromDate.hide(); 
     $(toSelector)[0].focus(); 
    }).data('datepicker'); 

    var toDate = $(toSelector).datepicker({ 
     weekStart: 1, 
     format: format, 
     onRender: function (date) { 
      return date.valueOf() <= fromDate.date.valueOf() ? 'disabled' : ''; 
     } 
    }).on('show', function (ev) { 
     fromDate.hide(); 
    }).on('changeDate', function (ev) { 
     toDate.hide(); 
    }).data('datepicker'); 
} 

在頁面底部:

<script> 
$('.datepicker').each(function() { 
    var thisId = $(this).attr("id"); 

    if(thisId.length >= 4 && thisId.substr(thisId.length - 4) == "from") { // The ID ends with 'from' - treat it as a 'from' date 
     var idRoot = thisId.substr(0, thisId.length - 4); 
     var toDateSelector = '#' + idRoot + 'to'; 
     var toDate = $(toDateSelector); 
     if(toDate.length) { // Found a matching 'to date' 
      datepickerFromTo('#' + thisId,toDateSelector,'dd/mm/yyyy'); 
     } 
    } else if(!thisId.length >= 2 && thisId.substr(thisId.length - 2) == "to") { // Bind an ordinary datepicker. Exclude anything with ID ending with 'to' date as this is handled when binding 'from' date. 
     $(this).datepicker({ 
      weekStart: 1, 
      format: 'dd/mm/yyyy' 
     }); 
    } 
}); 
</script> 
相關問題