javascript - jQuery ui datepicker: Remove yellow highlight on (unhighlight) today's - Stack Overflow

admin管理员组

文章数量:1400032

How do you remove the yellow highlight on datepicker's today's date? I was able to do it when my datepicker is called via an input field (got it from here: Jquery datepicker: highlight 'today' when clicked?), but cannot when it is called via div (inline = true)

My reason for this is I am using custom timezone and if I have a different today's date based on the timezone it still highlights the today's date of my local puter.

Here is the code that worked using an input field:

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

How do you remove the yellow highlight on datepicker's today's date? I was able to do it when my datepicker is called via an input field (got it from here: Jquery datepicker: highlight 'today' when clicked?), but cannot when it is called via div (inline = true)

My reason for this is I am using custom timezone and if I have a different today's date based on the timezone it still highlights the today's date of my local puter.

Here is the code that worked using an input field:

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

• javascript
• jquery
• css
• datepicker
• jquery-ui-datepicker

Share Improve this question Follow edited Jul 25, 2017 at 7:09 Rahul Gupta 10.2k77 gold badges6464 silver badges6969 bronze badges asked Jul 10, 2014 at 6:55 superignosuperigno 1,02422 gold badges1414 silver badges2626 bronze badges 3

• 2 Please add your code which you have tried... – j809 Commented Jul 10, 2014 at 6:56
• Use css and overwrite the classes you want. – Esko Commented Jul 10, 2014 at 6:59
• @gino , why dont u override its CSS classes ,and apply !important in your custom CSS? – Pratik Joshi Commented Jul 10, 2014 at 7:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

try this 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;
}

Make some changes in your code:

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

DEMO

FIDDLE

[UPDATE]

I did some new change, used onSelect method for same.

You can add .ui-state-highlight css class with .ui-state-default in jquery-ui.css like below :

.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

I solved this issue by very simple way: I've just removed all css rules of ui-state-highlight class from jquery.ui.css. Current date are higlighting with black border by adding only one css rule to ui-state-highlight class:

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

But I used only one date picker ui widget in my project.

本文标签： javascriptjQuery ui datepicker Remove yellow highlight on (unhighlight) today39sStack Overflow