如何根据第一个日期时间选择器中的选择禁用第二个日期时间选择器中的日期答案

【问题标题】：How to disable dates in second datetimepicker based on selection in the first one如何根据第一个日期时间选择器中的选择禁用第二个日期时间选择器中的日期
【发布时间】：2017-11-06 11:50:00
【问题描述】：

我正在使用 eonasdan 的 moment.js 和 bootstrap-datetimepicker。我的页面中有两个 datetimepicker。一个是到达的开始日期，另一个是结束日期。

我想在 datetimepicker 1 上选定日期之前禁用 datetimepicker 2 上的所有日期。

<form id="form" name="form" class="form-inline">
<div class="form-group">
    <label for="startDate">Start Date</label>
    <input id="startDate" name="startDate" type="text" class="form-control" 
/>
    &nbsp;
    <label for="endDate">End Date</label>
    <input id="endDate" name="endDate" type="text" class="form-control" />
</div>
</form>

还有 javascript 块：

$(window).load(function(){
    $('#startDate').datetimepicker({
        minDate: moment()
    });
    $('#endDate').datetimepicker({
        maxDate:  moment() 
    });
});

【问题讨论】：

标签： jquery html datetimepicker

【解决方案1】：

如下所示，您可以设置第二个日期选择器值

$("#startDate").datepicker({
             showOtherMonths: true,
             selectOtherMonths: true,
             dateFormat: 'dd-M-yy',
             onSelect: function (selectedDate) {            
                 var date = $(this).datepicker("getDate"); 
                 $("#endDate").datepicker("option", "minDate", selectedDate);
             }
     });

【讨论】：

谢谢！这与日期选择器一起使用。我需要做什么，它也可以与 dateTimepicker 一起使用。

【解决方案2】：

添加属性daysOfWeekDisabled 并传递一个array，其中包含要禁用的日期，其中0 是星期日，6 是星期六。

请注意，您禁用 Days 而不是 Dates

如果您想禁用所有这些：

$('#endDate').datetimepicker({
    maxDate:  moment(),
    daysOfWeekDisabled: [0, 1, 2, 3, 4, 5, 6] 
});

当用户从第一个datepicker 中选择日期时，只需从第二个datepicker 中删除属性

https://eonasdan.github.io/bootstrap-datetimepicker/#disabled-days-of-the-week

【讨论】：