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

Question

我在 ASP.Net WebForm 中使用了以下两个 DatePickers。我想禁用第二个 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>

怎么办？

Answer 1

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

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

但是如果你想换一种方式......你可以模仿我在评论中所说的逻辑，至少根据 min/max 事件拒绝/允许。 ..

The idea is on each calendars hook into the onClick/onChange, or in your case changeDate event and prevent the click if the date is past or before what your current min or max would be.

请看这个真的~~不整洁~~ 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 上），提供 [=35] 之前的任何日期=] 进入该集合。

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

Bootstrap-Datepicker: Set Min or Max dates and disable days that are out of range

javascript

asp.net

jquery

bootstrap-datepicker