【问题标题】:Bootstrap Datepicker doesn't restrict value by min and max datesBootstrap Datepicker 不会按最小和最大日期限制值
【发布时间】:2017-08-25 08:42:21
【问题描述】:

我需要将最大日期限制为今天的日期,所以我使用下一个代码:

<div class="datepicker">
    @Html.TextBoxFor(m => m.Birthdate, "{0:dd.MM.yyyy}", new { @class = "form-control", @style="max-width: 240px;" })
</div>
<script type="text/javascript">

    $(function () {
        $('.datepicker input').datepicker({
            language: "ru",
            autoclose: true,
            format: "dd.mm.yyyy",
            todayHighlight: true,
            maxDate: new Date()
        });
    });

</script>

由于不同浏览器之间的一些问题,我还使用了自定义日期验证器:

jQuery.validator.methods.date = function (value, element) {
    var pattern = new RegExp('^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$');
    return this.optional(element) || pattern.test(value);
}

正如我在标题中所写,最小和最大日期的限制不起作用(我也尝试设置最小日期)。我不确定,但可能是由于自定义验证码。但是那我需要怎么改呢?
P.S.对不起,如果我的问题太简单了,但我不太了解 JS。

【问题讨论】:

    标签: jquery asp.net-mvc twitter-bootstrap datepicker


    【解决方案1】:

    使用 startDate 和 endDate 可以设置

    $(function () {
            $('.datepicker input').datepicker({
                language: "ru",
                autoclose: true,
                format: "dd.mm.yyyy",
                todayHighlight: true,
                startDate : new Date('2017-03-10'),
                endDate : new Date()
            });
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
    
    <div class="datepicker">
    <input type='text' id='Birthdate'/>
    </div>

    【讨论】:

    • 非常感谢。你节省了我的时间。他们是否更改了属性名称?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多