我有两个日期选择器。当它们首次显示在页面上时,范围的最大值和最小值将设置为今天,以便不能选择任何日期。根据下拉选项,在两个日历上设置有效日期范围。我希望TODAY成为TO日期选择器中的默认选定日期,而FROM日期选择器中我不希望选择任何内容。我添加了一些CSS来突出显示今天,好像它是任何其他选定的日期。此时,TO日历中的所有内容都很好。但是,在FROM日历中,TODAY显示为好像已被选中,但实际上此时没有选择日期。问题似乎是即使你将datepicker的日期设置为'null',今天的日期仍然标记为ui-datepicker-current-date以及ui-datepicker-today。我今天被标记为ui-datepicker是没有问题的,因为,它毕竟是今天。由于它也被标记为ui-datepicker-current-date,我无法区分TO日历中未选择的日期与用户实际选择的日期。
有没有人想出如何使这项工作?添加到用户所选日期和未选择日期的选择器看起来是相同的。两者都标记为今天和当前日期,两者都是ui-active。
如果你完全迷路,我明天可以发布确切的代码。它在工作,我现在正在家里研究。提前感谢您提供的任何帮助!
答案 0 :(得分:0)
既然我已经花了比计划更多的时间,我会分享我的最终解决方案。
我仍然不满意datePicker将今天标记为当前所选日期的事实,有效地阻止了你没有选择日期的datePicker,但我仍然必须让它工作。这是我添加的CSS,您可以将其作为单独的文件包含或者您喜欢,只要它出现在jquery主题CSS之后:
.ui-datepicker-current-day .ui-state-active {
border: 1px solid #000;
background: #bebbbb url(images/ui-bg_glass_65_bebbbb_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #212121;
outline: none; }
这基本上覆盖了今天应用到今天的所有样式,并使其看起来与任何其他选定日期完全一样。接下来是javascript以防止默认日期显示为选中:
$("#nameOfDatePickerDiv").find("td.ui-datepicker-current-day").find("a:first-child").removeClass('ui-state-active');
首先,在设置有效范围之后,允许用户自行选择之前完成此操作。我发现当前的td,找到第一个,只有a,并剥夺它的活跃性。现在你有一个当前日期的日历,今天默认,但不会欺骗用户认为它已被预选。一旦他们自己进行选择,ui-state-active类将被添加到该日期。使用更新的样式并且没有这个JS,今天总是看起来好像已经预先选择了。
如果有人发现更好的方式随意分享。我花了太多时间在这上面,如果我错过了一些更明显的东西,我不会感到惊讶。