Question

I need to customize each month in ui datepicker. This means that for each month will show a different background image. I think to do the next:

<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div>

How can I get current month name and add it as a class to datepicker’s container?

Greatly appreciate any help!

Answer 1

You can use the month number, e.g. .month1 – .month12 or .monthJanuary – .monthDecember (or some other format) for this…personally I’d stick with numbers for other cultures, but you can adapt this answer for both ways. Use the onChangeMonthYear event of the datepicker like this:

$('#datepicker').datepicker({
   onChangeMonthYear: function(year, month, inst) { 
       //Month number (1-12) is month
       //Month name you can get by $("#datepicker .ui-datepicker-month").text()
       $(this).closest("div.calendar-container")
              .removeClass().addClass("calendar-container month" + month);
   }
});

And set it initially when the page loads (after creating the datepicker), since I’m using the month number in the above, it would look like this:

$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1));

If you were using names instead, use:

$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text());

Whichever option you go with, just create the 12 classes with the background images/styling you want. You can test it out here. If you wanted the background to actually be on the datepicker itself, not that .calendar-container <div> you’d just add that to the CSS selector to make it more specific, for example:

.month1 .ui-datepicker-inline { background: url(January.jpg); }

You can test out that version here.