使用jQuery DatePicker动态更改minDate和maxDate

Question

我对jQuery Datepicker有一个特殊的问题.我可以轻松添加日期范围,但我希望可选范围根据用户选择的事件进行更改.

因此,如果他们选择事件#1,他们只能从事件#1的日期范围中选择日期.

我编写了一个简单的小函数,只要用户选择一个新事件就会调用它,但它只显示最初设置的minDate/maxDate值.

function datepicker(startDate, endDate) {
  $( "#date" ).datepicker({
    inline: true,
    minDate: new Date(startDate),
    maxDate: new Date(endDate),
    dateFormat: 'dd/mm/yy' 
  });
}

我在$('#date').datepicker('remove');再次调用上面的函数之前尝试过调用,看它是否创建了一个具有正确日期的新实例,但它似乎不起作用.

我通过开发人员工具检查了所有数据,所有内容都被正确调用和传递.有什么我可以做的,让我的工作成为我想要的吗？

Answer 1

你有几个选择......

1)你需要调用destroy()方法不是remove()这样的......

$('#date').datepicker('destroy');

然后调用您的方法重新创建datepicker对象.

2)您可以更新现有objectvia 的属性

$('#date').datepicker('option', 'minDate', new Date(startDate));
$('#date').datepicker('option', 'maxDate', new Date(endDate));

要么...

$('#date').datepicker('option', { minDate: new Date(startDate),
                                  maxDate: new Date(endDate) });

Answer 2

对于from/to date,以下是我根据在另一个datepicker中输入的日期实施限制日期的方法.效果很好:

function activateDatePickers() {
    $("#aDateFrom").datepicker({
        onClose: function() {
            $("#aDateTo").datepicker(
                    "change",
                    { minDate: new Date($('#aDateFrom').val()) }
            );
        }
    });
    $("#aDateTo").datepicker({
        onClose: function() {
            $("#aDateFrom").datepicker(
                    "change",
                    { maxDate: new Date($('#aDateTo').val()) }
            );
        }
    });
}

Answer 3

$(document).ready(function() {
$("#aDateFrom").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var minDate = $('#aDateFrom').datepicker('getDate');
        $("#aDateTo").datepicker("change", { minDate: minDate });
    }
});

$("#aDateTo").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var maxDate = $('#aDateTo').datepicker('getDate');
        $("#aDateFrom").datepicker("change", { maxDate: maxDate });
    }
});
});