views:

242

answers:

2

Hi,

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.

A: 

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

Gaby
with the way the css is jQuery css structured, this would be overridden as the above only equals 10 in terms of css cascade-order value. The css requires a value of 20 or more (two classes) to override the jQuery ui css default.
danrichardson
+1  A: 

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');
}
danrichardson
But if I do it overriding the css it wouldn't allow me to have multiple cells with different colors, right?
MazarD
Marked your answer as the correct because it's the best approximation, anyway I didn't get the thing to stop refreshing so I decided to write my own event calendar. Thanks for the interest and the help!!
MazarD
No worries, you could always have a look at the very robust datePicker made by Kelvin Luck though - http://www.kelvinluck.com/assets/jquery/datePicker/
danrichardson