引导日期选择器 - 禁用日期 - 多datepickers

Question

我使用的日期选择器（http://www.eyecon.ro/bootstrap-datepicker/）的引导插件。 当你去上面的链接有你如何使一个简单的登记入住退房形式的代码示例。在结帐日期选择器上，所有在入住日期选择器之前的日期都被禁用。

我的网站上有多个签结账形式（多个房间）。每个房间你有一个登记入住和退房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在被通缉的正确顺序的数组。

如果任何人都可以帮助... :)在此先感谢！

Answer 1

我一直在这方面的工作，并认为我会张贴的情况下，任何人都在寻找答案。

它通过寻找类'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>