How to change the cell color of a jquery datepicker

给你一囗甜甜゛ 提交于 2019-11-26 21:53:10

问题


I have a jquery datepicker and I need to be able to change the background color for the selected cell date. I'm trying with something like:

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

hoping that the date parameter refers to the selected cell, but it doesn't seem to work.

Any suggestion?

//Edit: The solution should let me have different cells with different colors set dynamically, this is why I'm trying with onSelect instead of changing the CSS directly.

The purpose is to have a calendar with events established by the user.

Thanks in advance.


回答1:


I think the best way (assuming i have understood you correctly) is to simply override the css.
In your site stylesheet or html head section you just need to override the following css selector

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

EDIT

With your edit in mind, the following should work (assuming you can get the datepicker to stop refreshing)

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



回答2:


change in your css the class .ui-datepicker-current-day




回答3:


In my case, i need to remove active class, so:

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



回答4:


The datepicker by default follows your theme. But you can override anything.

ui-state-active is the style of the date you select. ui-state-highlight is the style it uses to identify the current date.

So do something like this:

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

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

You can rather add this css to the page or adjust the theme itself.



来源:https://stackoverflow.com/questions/2906266/how-to-change-the-cell-color-of-a-jquery-datepicker

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!