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）

但是如果你想以另一种方式去做...你可以模仿我在评论中所说的逻辑，至少根据最小/最大事件拒绝/允许......

这个想法是在每个日历上挂钩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之前的任何日期提供给该集合。

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

1 个答案: