Bootstrap datepicker从另一个datepicker更改minDate / startDate

我的页面中有两个日期选择器，都是bootstrap。 条件仅是关于结束日期的开始日期从不高。 意味着结束日期属性（minDate）必须在开始日期由datepicker更改时更改，并且在结束日期更改时相同，开始日期datepicker的日历的最小范围应根据结束日期值。

我希望你理解我的问题

$(document).ready(function(){ $("#startdate").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#enddate').datetimepicker('setStartDate', minDate); }); $("#enddate").datepicker(); }); 

Answer 1

我做了一个jsfiddle做你想要的。 正如pqdong所说，你在设置结束日期时调用了datetimepicker而不是datepicker。

这是工作的JavaScript：

 $(document).ready(function(){ $("#startdate").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#enddate').datepicker('setStartDate', minDate); }); $("#enddate").datepicker() .on('changeDate', function (selected) { var maxDate = new Date(selected.date.valueOf()); $('#startdate').datepicker('setEndDate', maxDate); }); }); 

Answer 2

我在Razzildinho的优秀答案上没有足够的声誉，但确实想提供一个可以帮助用户的小额外添加，这是为了突出第二个日期选择器上的选定日期。 您可以通过添加以下行来执行此操作：

 $('#enddate').datepicker('setDate', minDate); 

所以在上下文中它看起来像这样：

 $(document).ready(function(){ $("#startdate").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#enddate').datepicker('setStartDate', minDate); $('#enddate').datepicker('setDate', minDate); // <--THIS IS THE LINE ADDED }); $("#enddate").datepicker() .on('changeDate', function (selected) { var maxDate = new Date(selected.date.valueOf()); $('#startdate').datepicker('setEndDate', maxDate); }); });