jQuery Datepicker - Zeigen Sie vollen Monatsnamen in Auswahlbox

Question

Es nervt mich wirklich, dass die jQuery Datepicker eine Auswahlbox hat den Monat zu ändern, aber es zeigt nicht den vollen Monatsnamen (aber es funktioniert in den anderen Monaten).

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

Gibt es einen Weg, um die Datumsauswahl anpassen, um die vollen Monatsnamen zu zeigen, ohne den Quellcode zu modifizieren?

Answer 1

Vielleicht ein ein bisschen spät, aber ich hatte das gleiche Problem in diesem Moment und es war ziemlich einfach behoben. Bevor Sie die Datumsauswahl-Funktion, die von Monats- Array erhalten nennen, sie in eine neue Variable setzen und Kurznamen auf diese Variable durch den Aufruf ändern:

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

Dont besseren Weg finden als UI Datumsauswahl zu aktualisieren, aber das gibt Ihnen die Idee:

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

Sie können Attribut "monthNamesShort" wie definieren:

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

Answer 4

Sie die Datumsauswahl erweitern können und „überschreiben“ die fehlerhafte Funktion, auf lange vorbei Namen.

$.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) 
    } 
}); 

Dies hat den Vorteil, die vollständigen Namen in der Dropdown-Anzeigen aber ermöglichen die Formatierung in der/Optionen-Einstellungen festgelegt, wenn das Eingangselement mit dem ausgewählten Datum festgelegt ist.

Answer 5

Noch schönere Lösung wäre von Ihrem Locale-Objekt zu verwenden.

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

Answer 6

// jQuery UI Datepicker

Hier zeigen MM den vollständigen Namen des Monats

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