jQuery DatePicker - 即时更改minDate和maxDate [英] jQuery DatePicker -- Changing minDate and maxDate on the fly

问题描述

我有一个特殊的问题与jQuery Datepicker。我可以轻松添加日期范围，但是我希望可选范围根据用户选择的事件而改变。

所以如果他们选择事件＃1，他们可以只有从事件＃1的日期范围内选择日期。

我已经写了一个简单的小功能，只要用户选择一个新的事件，它就会被调用，但它只显示初始设置minDate / maxDate值。

 函数datepicker（startDate，endDate）{
 $（#date） .datepicker（{
 inline：true，
 minDate：new Date（startDate），
 maxDate：new Date（endDate），
 dateFormat：'dd / mm / yy'
}）; 
} 
  

我试过调用 $（'＃date '）.datepicker（'remove'）; 在再次调用上述函数之前，查看它是否创建了一个具有正确日期的新实例，但似乎不起作用。

我已经通过开发人员工具检查了所有的数据，一切正在被调用和传递。有什么我可以做的，使这项工作是我想要的吗？

解决方案

你有几个选项...

1）您需要调用 destroy（）方法不是 remove（） / code> so ...

  $（'＃date'）。datepicker（'destroy'）; 
  

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

2）您可以通过

更新现有对象的属性

  $（'＃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）}）; 
  

I'm having a particular issue with the jQuery Datepicker. I can easily add a date range, but I want the selectable range to change depending on the event the user has picked.

So if they pick event #1, they can only pick dates from event #1's date range.

I've written a simple little function that gets called whenever the user selects a new event, but it only ever shows the initially set minDate/maxDate values.

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

I've tried calling $('#date').datepicker('remove'); before calling the above function again, to see if it creates a new instance with the correct dates, but it doesn't seem to work.

I've checked all the data through developer tools and everything is being called and passed correctly. Is there anything I can do to make this work how I want it to?

解决方案

You have a couple of options...

1) You need to call the destroy() method not remove() so...

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

Then call your method to recreate the datepicker object.

2) You can update the property of the existing object via

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

or...

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

这篇关于jQuery DatePicker - 即时更改minDate和maxDate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！