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）您可以通过

更新现有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) });

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

Answer 4

我知道你正在使用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.*/

Answer 5

我通过使用此方法更改了日期时间选择器的min date属性

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

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

使用jQuery DatePicker动态更改minDate和maxDate

5 个答案: