Question

如何删除日期选择器今天的黄色突出显示？当我通过输入字段调用我的datepicker时，我能够做到这一点（从这里得到它：Jquery datepicker: highlight 'today' when clicked?），但是当通过div调用它时不能这样做（inline = 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);
        }
    });
});

Answer 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;
}

Answer 2

在代码中进行一些更改：

<强> HTML

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

<强> JS

$(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

<强> [UPDATE]

我做了一些新的更改，使用了onSelect方法。

Answer 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

Answer 4

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-dropdown">Publik <ul class="eg-dropdown"> <li>Teman</li> <li>Pribadi</li> </ul> </div>

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

jQuery ui datepicker：删除今天（unhighlight）上的黄色突出显示

4 个答案: