引导日期选择器 - 动态更新可用日期

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()); 
    }); 
});