引導日期選擇器 - 動態更新可用日期

Question

我正在使用引導日期選擇器控件。 我的頁面上有兩個日期選擇器，一個用於開始日期，另一個用於結束日期。我需要以開始日期在結束日期之後的方式限制選擇日期，反之亦然。 所以我增加了邏輯startDate和endDate性能這些datepickers：

$(document).ready(function() { 
    $('#txtEndDate').datepicker({ 
     startDate: new Date($("#txtStartDate").val()), 
     orientation: "bottom auto" 
    }); 
    $('#txtStartDate').datepicker({ 
     endDate: new Date($("#txtEndDate").val()), 
     orientation: "bottom auto" 
    }); 
    $('#txtEndDate').change(function() { 
     $('#txtStartDate').datepicker({ 
      endDate: new Date($(this).val()) 
     }); 
    }); 
    $('#txtStartDate').change(function() { 
     $('#txtEndDate').datepicker({ 
      startDate: new Date($(this).val()) 
     }); 
    }); 
}); 

它只在頁面加載工作正常，但如果其中一個日期改變，並且還沒有被保存，其他datepicker不根據此更改立即更新，並且我可以在其中選擇不適當的日期。 datepicker中的可用日期僅在我保存更改並刷新整個頁面後纔會更新。

我應該在這裏添加什麼以便動態更新我的datepickers中的可用日期？

Answer 1

我已經想通了。這工作對我來說：

$(document).ready(function() { 
    var startDate = $("#txtStartDate").val(); 
    var endDate = $("#txtEndDate").val(); 
    $('#txtEndDate').datepicker({ 
     beforeShowDay: function(date){ 
      if (startDate) { 
       return new Date(startDate).getTime() <= date.getTime(); 
      } else { 
       return true 
      } 
     } 
    }).on("changeDate",function() { 
     $('#txtStartDate').datepicker('setEndDate', $(this).val()); 
    }); 
    $('#txtStartDate').datepicker({ 
     beforeShowDay: function(date){ 
      if (endDate) { 
       return new Date(endDate).getTime() >= date.getTime(); 
      } else { 
       return true; 
      } 
     } 
    }).on("changeDate",function() { 
     $('#txtEndDate').datepicker('setStartDate', $(this).val()); 
    }); 
});