Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the cell color of a jquery datepicker

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.

like image 539
MazarD Avatar asked May 25 '10 15:05

MazarD


People also ask

How do I change the color of my datePicker?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. Kindly fine the highlighted code, this is the simplest way to change the colour of your datePicker.

How do I highlight specific dates in jquery ui datePicker?

Define beforeShowDay within datepicker() method. In the function create a new date format according to the defined format (dd-mm-yyyy) in an Array. Check for the date in the Array with $. inArray() method if it is available then return [true, "highlight", tooltip_text]; otherwise return [true] .


3 Answers

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');
}
like image 197
dan richardson Avatar answered Sep 18 '22 15:09

dan richardson


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

like image 21
Gabriele Petrioli Avatar answered Sep 19 '22 15:09

Gabriele Petrioli


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);
  }
});
like image 36
Liko Avatar answered Sep 18 '22 15:09

Liko