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

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

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