【问题标题】:Is there a way to style jquery's datepicker days?有没有办法设置 jquery 的 datepicker 日期?
【发布时间】:2011-05-18 17:01:19
【问题描述】:

假设我希望 2011 年 5 月 2 日(或任何其他日子)的颜色与其他日子不同。这可能吗?

这是特定日期的示例项目

<td class=" " onclick="DP_jQuery_1305738227207.datepicker._selectDay('#datepicker',4,2011, this);return false;"><a class="ui-state-default ui-state-hover" href="#">11</a></td>

我不知道是否有任何方法可以覆盖 datepicker 如何为每天创建 ids/classes。

【问题讨论】:

  • 可能。如果您提供标记会有所帮助。
  • 只是那一天,总是只有那一天,还是有多个/不同的日子?
  • 你可以使用 javascript 将一个类附加到数据包装器,如果它与你想要的不同颜色的日期匹配。
  • 我自己没用过这个,你试过jquery ui themeroller吗?我听说像日历这样的 jquery UI 样式非常有用。

标签: jquery css jquery-ui-datepicker


【解决方案1】:

工作示例: http://jsfiddle.net/hunter/UBPg5/


您可以通过添加 beforeShowDay 回调来做到这一点

绑定你的回调:

$("input:text.date").datepicker({
    beforeShowDay: SetDayStyle
});

使用一些错误日期的静态数组创建您的函数,或在其他地方构造此数组:

var badDates = new Array("5/2/2011");
function SetDayStyle(date) {
    var enabled = true;
    var cssClass = "";

    var day = date.getDate();
    var month = date.getMonth() + 1; //0 - 11
    var year = date.getFullYear();
    var compare = month + "/" + day + "/" + year;

    var toolTip = badDates.indexOf(compare) + " " + compare

    if (badDates.indexOf(compare) >= 0) cssClass = "bad";

    return new Array(enabled, cssClass, toolTip);
}

创建您的样式

.bad { background: red; }
.bad a.ui-state-active { background: red; color: white; }

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

该函数将日期作为参数,并且必须返回一个数组,其中 [0] 等于 true/false 指示此日期是否可选,[1] 等于 CSS 类名称或 ''默认演示文稿,以及 [2] 此日期的可选弹出工具提示。日期选择器中的每一天都会在显示之前调用它。

【讨论】:

  • 没问题,直到今天才知道有,但我可以看到一些很酷的应用程序
  • 这个解决方案运行良好,直到我更改月份,当我回到当前月份时,添加的课程不再存在......有什么想法吗?
  • 是的 Diego,同样的问题在这里使用某种通过 beforeShowDay 调用的函数
猜你喜欢
  • 2021-02-23
  • 1970-01-01
  • 2018-06-23
  • 1970-01-01
  • 1970-01-01
  • 2011-04-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多