jQuery Datepicker - Show full month names in select box

Question

It's really bugging me that the jQuery datepicker has a select box for changing the month but it doesn't show the full month name (but it does in the other months).

Screenshot: http://i.imgur.com/Pdkq0.png

Is there a way to customise the datepicker to show the full month name without modifying the source code?

Answer 1

Maybe a little bit late but I was having the same problem at this moment and it was pretty easily fixed. Before you call the datepicker function get the monthnames array, put them in a new variable and change shortnames by calling on that variable:

var fullmonth_array = $.datepicker.regional['nl'].monthNames; // change 'nl' to your own language of course
$('input[name="date-of-birth"]').datepicker(
{
   changeYear               : true,
   changeMonth              : true,
   yearRange                : "-85:-18",
   maxDate                  : "-18Y",
   minDate                  : "-85Y",
   monthNamesShort          : fullmonth_array
   // other stuff
}

Answer 2

Even nicer solution would be to use monthNames from your locale object.

// jQuery UI datepicker
$("#datepicker").datepicker({
    monthNamesShort: $.datepicker.regional["en"].monthNames
});

Answer 3

Dont find better way than updating UI datepicker, but that gives you the idea:

DEMO

var months = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];
var uDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function() {
    var ret = uDatepicker.apply(this, arguments);
    var $sel = this.dpDiv.find('select');
    $sel.find('option').each(function(i) {
        $(this).text(months[i]);
    });
    return ret;
};

$(function() {
    $("#id").datepicker({
        changeMonth: true,
        dateFormat: 'MM yy'
    });
});​