2015-04-06 58 views
0

我嘗試設置2個datepickers一個簡單的簽入/籤系統使用日期選擇器自舉:http://www.eyecon.ro/bootstrap-datepicker/日期選擇器引導初始化再次

這裏我的代碼:

var nowTemp = new Date(); 
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 

    var checkin = $('#searchtype_checkin').datepicker({ 
     onRender: function (date) { 
      return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
     }, 
     format: 'dd/mm/yyyy' 
    }).on('changeDate', function (ev) { 
     if (ev.date.valueOf() > checkout.date.valueOf()) { 
      var newDate = new Date(ev.date) 
      newDate.setDate(newDate.getDate() + 2); 
      checkout.setValue(newDate); 
     } 
     checkin.hide(); 

     $('#searchtype_checkout')[0].focus(); 
    }).data('datepicker'); 

    var checkout = $('#searchtype_checkout').datepicker({ 
     onRender: function (date) { 
      return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; 
     }, 
     format: 'dd/mm/yyyy' 
    }).on('changeDate', function (ev) { 
     checkout.hide(); 
    }).data('datepicker'); 

我得到了大多數代碼從文檔。我剛剛做了一些改變。這裏我想申請的邏輯:

在簽入一個日期後,我想在結帳日期選擇器中禁用此日期之前的所有日期,以避免在簽入之前簽出以及直接關注結帳關於登記事件'changeDate'。

一切正常,但如果在第一次選擇日期之前更改了我的簽入日期,則不會再次調用結帳功能「onRender」,並且先前在結帳日期選擇卡上禁用的所有日期仍處於禁用狀態。

如何在checkout datepicker上再次調用onRender事件?我想在簽入的每個「changeDate」之後調用這個函數。

回答

0

您可以使用選擇日期選擇器而不是您現在使用的任何選項。

var checkin = $('#searchtype_checkin').datepicker({ 
     onRender: function (date) { 
      return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
     }, 
     format: 'dd/mm/yyyy', 
     onSelect: function(selected) { 
       var date=new Date(selected) 
       day=date.getDate()+2; 
       newDate=date.getMonth()+1 + "/" + day + "/" + date.getFullYear(); 
       $("#searchtype_checkout").datepicker("option","minDate", newDate); 
     } 
}); 

編輯 - 當用戶選擇的退房日期可以ONSELECT添加到您的退房日期也因此,首先那麼所有後來的日期是在checkin日期禁用。

var checkout = $('#searchtype_checkout').datepicker({ 
     onRender: function (date) { 
        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; 
        }, 
     format: 'dd/mm/yyyy' 
     onSelect: function(selected,inst) { 
     $("#searchtype_checkin").datepicker("option","maxDate", selected) 
    } 
}); 

Working fiddle

+0

對不起,也許我沒有解釋清楚我嘗試做。主要問題不是設置結帳日期,而是問題是動態禁用簽入日期前的結帳日期。 – vgross 2015-04-06 08:39:57

+0

因此,您只想在簽入日期後的選定權限內啓用結帳日期? – 2015-04-06 08:43:35

+0

**一切正常,但如果在第一次選擇日期之前更改了我的簽入日期,則不會再次調用結帳功能「onRender」,並且以前在結帳日期選擇卡上禁用的所有日期仍然被禁用。這就是你在你的問題中提到的問題,根據我的回答,它解決了你的問題。請具體或編輯問題! – 2015-04-06 08:53:00