jQuery Datepicker - 在选择框中显示完整的月份名称答案

【问题标题】：jQuery Datepicker - Show full month names in select boxjQuery Datepicker - 在选择框中显示完整的月份名称
【发布时间】：2012-12-01 15:06:18
【问题描述】：

jQuery datepicker 有一个用于更改月份的选择框，但它没有显示完整的月份名称（但在其他月份显示），这让我很烦恼。

截图： http://i.imgur.com/Pdkq0.png

有没有办法在不修改源代码的情况下自定义日期选择器以显示完整的月份名称？

【问题讨论】：

你知道，调试一张图片真的很难......
你不需要调试任何东西。我在问如何自定义 jQuery UI 日期选择器。
好的，我不知道它是 datepicker 中的原始选项，我以为它是自定义选项，很抱歉

标签： jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

也许有点晚了，但我现在遇到了同样的问题，而且很容易解决。在调用 datepicker 函数之前，获取月份名称数组，将它们放入一个新变量中并通过调用该变量来更改短名称：

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
}

【讨论】：

如果有人遇到这个问题，为了让这个现在可以工作，你应该将$.datepicker.regional['nl'].monthNames更改为$.datepicker._defaults.monthNames

【解决方案2】：

更好的解决方案是使用您的语言环境对象中的monthNames。

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

【讨论】：

【解决方案3】：

没有找到比更新 UI 日期选择器更好的方法，但这给了你这个想法：

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'
    });
});

【讨论】：

谢谢，这行得通，只是它不太正确。如果选择菜单中没有 12 个月，则月份是错误的。例如，如果当前月份是 12 月，则只有 12 月会显示在选择菜单中，但根据您的脚本，它将被称为“一月”。要修复，$(this).text(months[i]); 需要是 $(this).text(months[$(this).attr('value')]);

【解决方案4】：

您可以扩展日期选择器并“覆盖”有问题的函数，传入长名称。

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

这样做的好处是在下拉列表中显示全名，但当输入元素设置为所选日期时，允许在设置/选项中指定格式。

【讨论】：

【解决方案5】：

//jquery UI 日期选择器

这里MM显示月份全名

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

【讨论】：

【解决方案6】：

您可以将属性“monthNamesShort”定义为：

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

【讨论】：