如何更改 jquery datepicker 的单元格颜色答案

【问题标题】：How to change the cell color of a jquery datepicker如何更改 jquery datepicker 的单元格颜色
【发布时间】：2010-05-25 15:53:03
【问题描述】：

我有一个 jquery datepicker，我需要能够更改所选单元格日期的背景颜色。我正在尝试类似的东西：

    $("#fecha").datepicker({ 
          onSelect: function(value, date) { 
             alert(date.css());
          } 
    });

希望日期参数引用选定的单元格，但它似乎不起作用。

有什么建议吗？

//编辑：该解决方案应该让我动态设置具有不同颜色的不同单元格，这就是我尝试使用 onSelect 而不是直接更改 CSS 的原因。

目的是为用户创建一个包含事件的日历。

提前致谢。

【问题讨论】：

如果给定答案有效，请将其标记为“答案”以帮助其他人。这样可以节省被问到的重复问题。
我知道，但我表达得很糟糕，所以我编辑了问题，我正在等待答案，然后再标记正确的问题。无论如何感谢您的回答！ :D
遗憾的是，我认为这是不可能的。您可以访问 onSelect 回调，但是 DatePicker 的内容也会被重绘，我不知道这是否可以停止。但是，如果您可以阻止重新绘制日期选择器，我给出的新答案将起作用。

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

我认为最好的方法（假设我对您的理解正确）是简单地覆盖 css。
在您的站点样式表或 html 头部分中，您只需要覆盖以下 css 选择器

.ui-datepicker-current-day .ui-state-active { background: #000000; }

编辑

考虑到您的编辑，以下应该可以工作（假设您可以让日期选择器停止刷新）

onSelect: function(value, date) {
    date.dpDiv.find('.ui-datepicker-current-day a')
        .css('background-color', '#000000');
}

【讨论】：

但是如果我这样做覆盖了 css，它就不允许我拥有多个不同颜色的单元格，对吧？
将您的答案标记为正确，因为它是最好的近似值，无论如何我没有停止刷新，所以我决定编写自己的活动日历。感谢您的关注和帮助！
不用担心，您可以随时查看 Kelvin Luck 制作的非常强大的 datePicker - kelvinluck.com/assets/jquery/datePicker
这工作：jsfiddle.net/abhMH/2 如此处建议：stackoverflow.com/questions/12690626/…

【解决方案2】：

更改你的css类.ui-datepicker-current-day

【讨论】：

随着 css 是 jQuery css 结构的方式，这将被覆盖，因为上面的 css 级联顺序值仅等于 10。 css 需要 20 或更大的值（两个类）来覆盖 jQuery ui css 默认值。

【解决方案3】：

在我的情况下，我需要删除活动类，所以：

$("#datepicker").datepicker({
  onSelect: function(dateText, inst) {
    setTimeout(function(){
      inst.dpDiv.find('.ui-datepicker-current-day a').removeClass('ui-state-active');
    }, 50);
  }
});

【讨论】：

【解决方案4】：

默认情况下，日期选择器遵循您的主题。但是你可以覆盖任何东西。

ui-state-active 是您选择的日期的样式。 ui-state-highlight 是它用来标识当前日期的样式。

所以做这样的事情：

#ui-datepicker-div .ui-state-active {color: #FFFFCC;}

#ui-datepicker-div .ui-state-highlight {color: #DCDCDC;}

您可以将此 css 添加到页面或调整主题本身。

【讨论】：