9/19/13

How to change the cell color of a jquery datepicker - Stack Overflow

Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

Tell me more

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: $ ( " # f e c h a " ) . d a t e p i c k e r ( { o n S e l e c t :f u n c t i o n ( v a l u e ,d a t e ){ a l e r t ( d a t e . c s s ( ) ) ; } } ) ; 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.
jquery jquery-ui jquery-datepicker

edited Jul 18 '10 at 3:50 Dennis Williamson 81.6k 13 89 164

asked May 25 '10 at 15:53 MazarD 845 1 7 16

If a given answer works please mark it as the "answer" to help everyone else. This saves dup questions being asked. danrichardson May 26 '10 at 9:06 I know, but I expressed myself badly so I edited the question and I'm waiting for answers before marking the correct one. Thanks for the answer anyway! :D MazarD May 26 '10 at 9:30 Sadly i don't think that is possible. You have access to the onSelect callback, however the contents of the DatePicker get redrawn also and i don't know if this can be stopped. But the the new answer i have given WOULD work if you can stop the date picker getting redrawn. danrichardson May 26 '10 at 11:15

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 . u i d a t e p i c k e r c u r r e n t d a y. u i s t a t e a c t i v e{b a c k g r o u n d :# 0 0 0 0 0 0 ;} EDIT With your edit in mind, the following should work (assuming you can get the datepicker to stop refreshing) o n S e l e c t :f u n c t i o n ( v a l u e ,d a t e ){ d a t e . d p D i v . f i n d ( ' . u i d a t e p i c k e r c u r r e n t d a ya ' ) . c s s ( ' b a c k g r o u n d c o l o r ' ,' # 0 0 0 0 0 0 ' ) ; }

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

1/2

9/19/13

}
edited May 26 '10 at 11:18

How to change the cell color of a jquery datepicker - Stack Overflow

answered May 25 '10 at 16:11 danrichardson 1,167 1 9 21

But if I do it overriding the css it wouldn't allow me to have multiple cells with different colors, right? MazarD May 26 '10 at 9:12 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 May 27 '10 at 10:24 No worries, you could always have a look at the very robust datePicker made by Kelvin Luck though kelvinluck.com/assets/jquery/datePicker danrichardson May 27 '10 at 16:11 this worked: jsfiddle.net/abhMH/2 as suggested here: stackoverflow.com/questions/12690626/ Stano Jul 21 at 20:03

change in your css the class . u i d a t e p i c k e r c u r r e n t d a y

answered May 25 '10 at 16:09

Gaby aka G. Petrioli 67.1k 7 55 104 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 May 25 '10 at 16:16

The datepicker by default follows your theme. But you can override anything. u i s t a t e a c t i v e is the style of the date you select. u i s t a t e h i g h l i g h t is the style it uses to identify the current date. So do something like this: # u i d a t e p i c k e r d i v. u i s t a t e a c t i v e{ c o l o r :# F F F F C C ; } # u i d a t e p i c k e r d i v. u i s t a t e h i g h l i g h t{ c o l o r :# D C D C D C ; } You can rather add this css to the page or adjust the theme itself.
edited Mar 6 '12 at 18:31 McDowell 53.9k 9 78 147 answered Mar 6 '12 at 17:57 Chad Kuehn 103 6

Not the answer you're looking for? Browse other questions tagged jquery jquery-ui
jquery-datepicker or ask your own question.

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

2/2