jQuery ui datepicker：删除（取消突出显示）今天的黄色突出显示答案

【问题标题】：jQuery ui datepicker: Remove yellow highlight on (unhighlight) today'sjQuery ui datepicker：删除（取消突出显示）今天的黄色突出显示
【发布时间】：2014-07-10 06:55:34
【问题描述】：

如何去除 datepicker 今天日期上的黄色高亮显示？当通过输入字段调用我的日期选择器时，我能够做到这一点（从这里得到它：Jquery datepicker: highlight 'today' when clicked?），但是当通过 div 调用它时不能做到（内联 = true）

我这样做的原因是我使用的是自定义时区，如果我根据时区有不同的今天日期，它仍然会突出显示我本地计算机的今天日期。

这是使用输入字段的代码：

HTML：

<p>Date: <input type="text" id="datepicker" /></p>

Javascript：

$(function() {
    $("#datepicker").datepicker({
        beforeShow: function (input, inst) {
            setTimeout(function() {
                inst.dpDiv.find('a.ui-state-highlight').removeClass('ui-state-highlight');
            }, 100);
        }
    });
});

【问题讨论】：

请添加您尝试过的代码...
使用 css 覆盖你想要的类。
@gino，你为什么不覆盖它的 CSS 类，并在你的自定义 CSS 中应用 !important？

标签： javascript jquery css datepicker jquery-ui-datepicker

【解决方案1】：

试试这个DEMO

.ui-state-highlight{
    border:1px solid #d3d3d3/*{borderColorDefault}*/ !important;
    background:#e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/!important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{
     border:1px solid #aaaaaa/*{borderColorActive}*/ !important;
    background:#ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/!important;
}

【讨论】：

太棒了。谢谢@Amit！

【解决方案2】：

对您的代码进行一些更改：

HTML

Date: <div inlineEditable="true" id="datepicker" ></div>

$(function() {
    $("#datepicker").datepicker({
          onSelect: function (dateText, inst) {
            setTimeout(function() {
            $(document).find('a.ui-state-highlight').removeClass('ui-state-highlight');
             }, 100);
          } 
    });
     setTimeout(function() {
        $(document).find('a.ui-state-highlight').removeClass('ui-state-highlight');
     }, 100);
});

演示

FIDDLE

[更新]

我做了一些新的改变，同样使用了onSelect 方法。

【讨论】：

但这仍然突出显示今天的日期。
@BhushanKawadkar - 请查看我更新的答案。我以前应该这样做。感谢您的更新。
嗨@ShailParas，当我在鼠标释放时单击不同的日期时，我仍然在今天的日期上看到一个突出显示，然后它才会改变颜色

【解决方案3】：

您可以在 jquery-ui.css 中添加.ui-state-highlight css 类和.ui-state-default，如下所示：

.ui-state-highlight,/*added this with ui-state-default */
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default 
{ 
  border: 1px solid #d3d3d3/*{borderColorDefault}*/; 
  background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; 
  font-weight: normal/*{fwDefault}*/; 
  color: #555555/*{fcDefault}*/; 
}

.ui-state-highlight,/*added this with ui-state-default */
.ui-state-default a, 
.ui-state-default a:link, 
.ui-state-default a:visited 
{ 
  color: #555555/*{fcDefault}*/; 
  text-decoration: none; 
}

Demo

【讨论】：

【解决方案4】：

我通过非常简单的方式解决了这个问题：我刚刚从 jquery.ui.css 中删除了 ui-state-highlight 类的所有 css 规则。通过向 ui-state-highlight 类仅添加一条 css 规则，当前日期以黑色边框突出显示：

.ui-state-highlight { border-color: black !important; }

但我在项目中只使用了一个日期选择器 ui 小部件。

【讨论】：