jQuery Datepicker - Mostra i nomi completi del mese nella casella di selezione

Question

Mi fa davvero impazzire il fatto che jQuery datepicker abbia una casella di selezione per cambiare il mese ma non mostra il nome completo del mese (ma lo fa negli altri mesi).

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

Esiste un modo per personalizzare il DatePicker per visualizzare il nome completo del mese senza modificare il codice sorgente?

Answer 1

Forse un un po 'in ritardo ma stavo avendo lo stesso problema in questo momento ed è stato risolto abbastanza facilmente. Prima di chiamare la funzione DatePicker ottenere monthNames, li metti in una nuova variabile e cambia shortnames invitando tale variabile:

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

Non trovare il modo migliore di aggiornamento dell'interfaccia utente datepicker, ma che ti dà l'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' 
    }); 
});​ 

Answer 3

è possibile definire attributo "monthNamesShort" come:

$(".selector").datepicker({ 
    monthNamesShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] 
}); 

Answer 4

È possibile estendere la funzione incriminata DatePicker e "override", passando nel lungo nomi.

$.extend($.datepicker, { 
    __base__generateMonthYearHeader: $.datepicker._generateMonthYearHeader, 

    _generateMonthYearHeader: function (inst, 
             drawMonth, 
             drawYear, 
             minDate, 
             maxDate, 
             secondary, 
             monthNames, 
             monthNamesShort) { 
     return $.datepicker.__base__generateMonthYearHeader(
      inst, 
      drawMonth, 
      drawYear, 
      minDate, 
      maxDate, 
      secondary, 
      monthNames, 
      monthNames) 
    } 
}); 

Questo ha il vantaggio di visualizzare i nomi completi nel menu a discesa, ma che consente la formattazione specificato nelle impostazioni/opzioni quando l'elemento di input è impostato con la data selezionata.

Answer 5

Soluzione ancora migliore sarebbe utilizzare monthNames dall'oggetto locale.

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

Answer 6

// jQuery UI datepicker

Qui MM mostrano il nome completo del mese

$("#datepicker").datepicker({ 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: 'dd MM yy', 
});