JQuery UI Datepicker禁用周末但允许特定日期?

时间:2021-09-21 09:12:43

I am currently using the datepicker and I make use of beforeShowDay and noWeekends to disable selection of weekends which works fine, however I would like to re-enable certain weekends for selection (e.g. Valentine's Day) as my shop will specially deliver for those days. Is there any way to do this?

我目前正在使用datepicker,我使用beforeShowDay和noWeekends来禁用周末选择工作正常,但我想重新启用某些周末进行选择(例如情人节),因为我的商店将专门为那些日子提供服务。有没有办法做到这一点?

1 个解决方案

#1


0  

Well, you will have to cheat a little over the UI DatePicker functionality, since you have to set manually the values that represent an active day of month.

好吧,你必须在UI DatePicker功能上做一点作弊,因为你必须手动设置表示活动日期的值。

First, take a look of the HTML structure of an active day:

首先,看一下活动日的HTML结构:

<td data-year="2016" data-month="2" data-event="click" data-handler="selectDay" class=" ">
<a href="#" class="ui-state-default">11</a>
</td>

And this is how an inactive day looks like:

这就是一个不活跃的日子的样子:

<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">12</span>
</td>

So, what you have to do is:

所以,你要做的是:

  • Identify in the DOM the day of the month you want to activate. Ej, $("table.ui-datepicker-calendar").find("td:contains(14)")
  • 在DOM中标识要激活的月份中的某一天。 Ej,$(“table.ui-datepicker-calendar”)。find(“td:contains(14)”)

  • Remove the ui-datepicker-unselectable and ui-state-disabled classes using removeClass()
  • 使用removeClass()删除ui-datepicker-unselectable和ui-state-disabled类

  • Add the missing attributes: data-year="2016" data-month="2" data-event="click" data-handler="selectDay" using attr() method
  • 使用attr()方法添加缺少的属性:data-year =“2016”data-month =“2”data-event =“click”data-handler =“selectDay”

  • Convert the inner <span> to an <a> using remove() and append()
  • 使用remove()和append()将内部转换为

  • And finally, you will have to also call setDate manually on the datePicker to set the desired date when the element is clicked.
  • 最后,您还必须在datePicker上手动调用setDate,以便在单击元素时设置所需的日期。

It looks ugly and not so straightforward but it has worked for me, since there is nothing builtin in the DatePicker.

它看起来很丑陋并不那么简单,但它对我有用,因为DatePicker中没有任何内置功能。

#1


0  

Well, you will have to cheat a little over the UI DatePicker functionality, since you have to set manually the values that represent an active day of month.

好吧,你必须在UI DatePicker功能上做一点作弊,因为你必须手动设置表示活动日期的值。

First, take a look of the HTML structure of an active day:

首先,看一下活动日的HTML结构:

<td data-year="2016" data-month="2" data-event="click" data-handler="selectDay" class=" ">
<a href="#" class="ui-state-default">11</a>
</td>

And this is how an inactive day looks like:

这就是一个不活跃的日子的样子:

<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled ">
<span class="ui-state-default">12</span>
</td>

So, what you have to do is:

所以,你要做的是:

  • Identify in the DOM the day of the month you want to activate. Ej, $("table.ui-datepicker-calendar").find("td:contains(14)")
  • 在DOM中标识要激活的月份中的某一天。 Ej,$(“table.ui-datepicker-calendar”)。find(“td:contains(14)”)

  • Remove the ui-datepicker-unselectable and ui-state-disabled classes using removeClass()
  • 使用removeClass()删除ui-datepicker-unselectable和ui-state-disabled类

  • Add the missing attributes: data-year="2016" data-month="2" data-event="click" data-handler="selectDay" using attr() method
  • 使用attr()方法添加缺少的属性:data-year =“2016”data-month =“2”data-event =“click”data-handler =“selectDay”

  • Convert the inner <span> to an <a> using remove() and append()
  • 使用remove()和append()将内部转换为

  • And finally, you will have to also call setDate manually on the datePicker to set the desired date when the element is clicked.
  • 最后,您还必须在datePicker上手动调用setDate,以便在单击元素时设置所需的日期。

It looks ugly and not so straightforward but it has worked for me, since there is nothing builtin in the DatePicker.

它看起来很丑陋并不那么简单,但它对我有用,因为DatePicker中没有任何内置功能。