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)")
- Remove the
ui-datepicker-unselectable
andui-state-disabled
classes usingremoveClass()
- Add the missing attributes:
data-year="2016" data-month="2" data-event="click" data-handler="selectDay"
usingattr()
method - Convert the inner
<span>
to an<a>
usingremove()
andappend()
- And finally, you will have to also call
setDate
manually on the datePicker to set the desired date when the element is clicked.
在DOM中标识要激活的月份中的某一天。 Ej,$(“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”
最后,您还必须在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)")
- Remove the
ui-datepicker-unselectable
andui-state-disabled
classes usingremoveClass()
- Add the missing attributes:
data-year="2016" data-month="2" data-event="click" data-handler="selectDay"
usingattr()
method - Convert the inner
<span>
to an<a>
usingremove()
andappend()
- And finally, you will have to also call
setDate
manually on the datePicker to set the desired date when the element is clicked.
在DOM中标识要激活的月份中的某一天。 Ej,$(“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”
最后,您还必须在datePicker上手动调用setDate,以便在单击元素时设置所需的日期。
It looks ugly and not so straightforward but it has worked for me, since there is nothing builtin in the DatePicker.
它看起来很丑陋并不那么简单,但它对我有用,因为DatePicker中没有任何内置功能。