有没有办法设置jquery datepicker日的样式?

时间:2011-05-18 17:01:19

标签: jquery css jquery-ui-datepicker

假设我希望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>

我不知道是否有办法覆盖日期选择器如何为每天创建ID /类。

1 个答案:

答案 0 :(得分:7)

工作示例: 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]此日期的可选弹出工具提示。在显示之前,会在datepicker中调用它。