0

我有两个日期选择器。当它们首次显示在页面上时,范围的最大值和最小值设置为今天,因此无法选择日期。根据下拉选择,在两个日历上都设置了有效日期范围。我希望 TODAY 成为 TO 日期选择器和 FROM 日期选择器中的默认选定日期,我不想选择任何内容。我添加了一些 CSS 来突出显示今天,就好像它是任何其他选定的日期一样。在这一点上,一切都在 TO 日历中。然而,在 FROM 日历中,TODAY 显示为好像已选择,但实际上此时尚未选择任何日期。问题似乎是,即使您将 datepicker 的日期设置为“null”,今天的日期仍被标记为 ui-datepicker-current-date 以及 ui-datepicker-today。我对它被标记为 ui-datepicker-today 没有任何问题,因为它毕竟是今天。由于它也被标记为 ui-datepicker-current-date,因此我无法将 TO 日历中未选择的日期与用户实际选择的日期区分开来。

有没有人想出如何使这项工作?添加到用户选择的日期和未选择的日期的选择器看起来是相同的。两者都在今天和当前日期标记,并且都是 ui-active。

如果您完全迷路了,我明天可以发布确切的代码。它在工作,我现在正在家里研究。提前感谢您提供的任何帮助!

4

1 回答 1

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,今天总是会看起来好像它已经被预先选择了。

如果有人找到更好的方法,请随时分享。我在这方面花了太多时间,如果我错过了更明显的东西,我不会感到惊讶。

于 2010-03-19T18:55:54.477 回答