使用 jQuery DatePicker 即时更改 minDate 和 maxDate答案

【问题标题】：Changing minDate and maxDate on the fly using jQuery DatePicker使用 jQuery DatePicker 即时更改 minDate 和 maxDate
【发布时间】：2013-04-22 11:38:33
【问题描述】：

我在使用 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');，看看它是否创建了一个日期正确的新实例，但它似乎不起作用。

我已经通过开发人员工具检查了所有数据，并且所有数据都被正确调用和传递。我可以做些什么来使这项工作按我的意愿工作吗？

【问题讨论】：

您是否尝试过$('#date').datepicker('option', {minDate: new Date(startDate)}); per api.jqueryui.com/datepicker/#method-option 这让您可以即时更改选项。
@StevenVondruska 我没看到。谢谢你，它奏效了！如果您愿意，请将其放在答案中。

标签： jquery jquery-ui datepicker

【解决方案1】：

你有几个选择...

1) 你需要调用destroy() 方法而不是remove() 所以...

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

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

2）您可以通过

更新现有object的属性

$('#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) });

【讨论】：

新 API 调用“minDate”或“maxDate”而不是“minValue”或“maxValue”。我花了 10 分钟才意识到这一点（掌心）。
我尝试了这段代码，但我收到了 Uncaught Type Error: datepicker is not a function 的错误。 =S
@MahrukhMehmood 这意味着您没有包含在页面上的正确文件。确保包含 jQuery UI。
是的，我清理了我的缓存、cookie 等所有内容并更新了我的 js 文件，终于能够实现这一目标。呼：）

【解决方案2】：

对于从/到日期，这是我根据在另一个日期选择器中输入的日期来实施限制日期的方法。效果不错：

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()) }
            );
        }
    });
}

【讨论】：

【解决方案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 });
    }
});
});

【讨论】：

【解决方案4】：

我已经使用这个更改了日期时间选择器的最小日期属性

$('#date').data("DateTimePicker").minDate(startDate);

我希望这对某人有所帮助！

【讨论】：

【解决方案5】：

我知道你正在使用 Datepicker，但是对于像我这样只使用 HTML5 输入日期的人来说，有一个例子可以做到这一点： JSFiddle Link

$('#start_date').change(function(){
  var start_date = $(this).val();
  $('#end_date').prop({
    min: start_date
  });
});


/*  prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/

【讨论】：