jquery datepicker日期限制不起作用答案

【问题标题】：jquery datepicker date restriction not workingjquery datepicker日期限制不起作用
【发布时间】：2017-06-11 13:16:14
【问题描述】：

我尝试通过来自另一个选择器的值来限制选择器。我在这里查看了其他问题，但它们似乎已经过时并且不起作用

我所做的是跟随

<p><input type="text" id="startdatepicker"></p>
<p><input type="text" id="enddatepicker"></p>

$(function() {
    $("#startdatepicker")
        .datepicker({ minDate: -1, maxDate:"" })
        .datepicker("option", "dateFormat", "dd.mm.yy");
});

$(function() {
    $("#enddatepicker")
        .datepicker({
            minDate: $("#startdatepicker").datepicker("getDate"), 
            maxDate: ""
        })
        .datepicker("option", "dateFormat", "dd.mm.yy");
});

如何正确地做到这一点？

【问题讨论】：

除非您在选择第一个日期后设置第二个选择器，否则它不会那样工作。所以我会使用change 事件在另一个上调用设置，在选择值之后。另外，我看不出有理由调用datapicker() 两次，在minDate 和maxDate 等构造函数选项中传递dateFormat 选项。

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

这很容易实现：

$(function() {
    $("#startdatepicker, #enddatepicker")
        .datepicker({
            minDate: -1,
            dateFormat: "dd.mm.yy",
         })
     ;

    $('#enddatepicker')
        .datepicker('option', 'disabled', true);

    $('#startdatepicker').on('change', function(){
        var datestamp = this.value.split('.');

        datestamp = new Date(
            +datestamp[2],
            +datestamp[1],
            +datestamp[0]
        );

        if (!datestamp) return false;

        $('#enddatepicker')
            .datepicker('option', 'disabled', false)
            .datepicker('option', 'minDate', datestamp)
        ;
    });
});

https://jsfiddle.net/zvc1p8xk/

【讨论】：