JQuery UI 日期选择器禁用周末，但允许特定日期

JQuery UI Datepicker disable weekends but allow specific date?

本文关键字：日期 周末 许特定 UI 选择器 JQuery      更新时间：2023-09-26

我目前正在使用日期选择器，我利用beforeShowDay和noWeekends来禁用周末选择，这工作正常，但是我想重新启用某些周末以供选择（例如情人节），因为我的商店将专门为这些日子提供。有什么办法可以做到这一点吗？

好吧，您将不得不在UI DatePicker功能上作弊，因为您必须手动设置表示每月活动日期的值。

首先，看一下活动日的HTML结构：

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

这就是不活动日的样子：

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

所以，你要做的是：

  • 在 DOM 中标识要激活的月份中的哪一天。呃，$("table.ui-datepicker-calendar").find("td:contains(14)")
  • 使用 removeClass() 删除ui-datepicker-unselectable和ui-state-disabled类
  • 添加缺少的属性：使用attr()方法data-year="2016" data-month="2" data-event="click" data-handler="selectDay"
  • 使用 remove() 和 append()将内部<span>转换为<a>
  • 最后，您还必须在 datePicker 上手动调用setDate以设置单击元素时的所需日期。

它看起来很丑，也不是那么简单，但它对我有用，因为日期选择器中没有任何内置功能。

相关文章：