Bootstrap-Datepicker：设置最小或最大日期并禁用超出范围的日期答案

【问题标题】：Bootstrap-Datepicker: Set Min or Max dates and disable days that are out of rangeBootstrap-Datepicker：设置最小或最大日期并禁用超出范围的日期
【发布时间】：2017-12-12 15:15:00
【问题描述】：

我在ASP.Net WebForm 中使用了以下两个 DatePicker。我想禁用第二个 DatePicker 中比第一个 DatePicker 中选择的日期更早的日期。

<script type="text/javascript">
$(document).ready(function () {            
    $("#FromDate").datepicker({
        autoclose: true,
        format: 'MM/dd/yyyy',
        todayHighlight: true,
        clearBtn: true,
        orientation: 'bottom'
    });
});

</script>
<script type="text/javascript">
$(document).ready(function () {            
    $("#ToDate").datepicker({
        autoclose: true,
        format: 'MM/dd/yyyy',
        todayHighlight: true,
        clearBtn: true,
        orientation: 'bottom'
    });
});
</script>

而.aspx代码是：

<tr>
    <td class="auto-style1">
        From Date: 
    </td>
    <td rowspan="2" class="auto-style1">  
        <div class="form-group">  
        <%--<label for="usr">FromDate:</label> --%>                     
            <div class='input-group date' id='FromDate'>
                <asp:TextBox ID="TextBoxFromDate" runat="server" CssClass="form-control"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <%--<label for="usr">ToDate:</label>--%>
            <div class="input-group date" id="ToDate">
                <asp:TextBox ID="TextBoxToDate" runat="server" CssClass="form-control"></asp:TextBox>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div> 
        </div>
    </td>
</tr>

怎么办？

【问题讨论】：

它的要点是将日期选择器 1 中选择的日期设置为日期选择器 2 的 minDate/startDate。
感谢罗汉的回答。我明白了。但我不确定如何在代码中做到这一点。我不确定如何从第一个 DatePicker 访问所选日期。稍后在代码中，我从 TextBox 中的第一个 DatePicker 设置所选日期。但这在代码中要晚得多，我已经用 C# 编写了。
我对这个确切的组件不太熟悉，但我从文档中看到（我认为）.on('changeDate', function(e) { console.log(e);}) 将让您访问每个选择器的更改事件

标签： javascript jquery asp.net bootstrap-datepicker

【解决方案1】：

我实际上建议您尝试找到一个可以为您执行此操作的组件。

例如：我会尝试找到一个可以应用 CSS 样式和禁用等作为其公开功能集的一部分...据我所知，我过去曾使用过一个maxDate 和组件（内部）将根据需要启用和禁用天|月|年。（就是这样：daterangepicker）

但是，如果您想以另一种方式进行...您可以效仿我在评论中所述的逻辑，并且至少根据最小/最大事件拒绝/允许...

这个想法是在每个日历上挂钩到 onClick/onChange，或者在你的情况下是 changeDate 事件和如果日期超过或早于您当前的最小值或最大值，则阻止点击会的。

请看这个真的 ~~untidy~~ fiddle 和下面的代码示例：

var allowedMin, allowedMax = 0;

var from = $("#FromDate").datepicker(opts)
  .on('changeDate', function(e) { 
    // set new min
    allowedMin = new Date(e.date);    

    // if we have no max yet, or one has been set
    if(!allowedMax || new Date(e.date) < allowedMax) { 
        // if we're in the allowed range update
        $('#from').html(e.date);
        $('#status').html('update allowed');
        return true;
    } else {    
        // ... otherwise reject
        $('#FromDate').datepicker('update', new Date($('#from').html()));
        $('#status').html('update prevented/reverted');
        return false;
    }
  });

var to = $("#ToDate").datepicker(opts)
  .on('changeDate', function(e) {
    allowedMax = new Date(e.date);    
    if(!allowedMin || new Date(e.date) > allowedMin) { 
        $('#to').html(e.date);
        $('#status').html('update allowed');
        return true;
    } else {
       $('#ToDate').datepicker('update', new Date($('#to').html()));
       $('#status').html('update prevented/reverted');
       return false;
    }
  });

更新：

我看到 bootstrap-datepicker 将允许您设置 disabled dates 的数组，因此新逻辑将是（在相应的 changeDates 上），将您的 min/max 之前的任何日期输入到该集合中。

【讨论】：