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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13864700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 13:01:30  来源:igfitidea点击:

jQuery Datepicker - Show full month names in select box

jqueryjquery-uidatepickerjquery-ui-datepicker

提问by BadHorsie

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).

jQuery datepicker 有一个用于更改月份的选择框,但它没有显示完整的月份名称(但它在其他月份显示),这真的让我感到烦恼。

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

截图: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?

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

回答by Renske

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:

也许有点晚了,但此时我遇到了同样的问题,而且很容易解决。在调用 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
}

回答by Boris Brdari?

Even nicer solution would be to use monthNamesfrom your locale object.

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

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

回答by A. Wolff

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

找不到比更新 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'
    });
});?

回答by jay.d

You can extend the datepicker and "override" the offending function, passing in the long names.

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

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

This has the benefit of displaying the full names in the drop down but allowing the formatting specified in the settings/options when the input element is set with the selected date.

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

回答by Helena Silkina

You can define attribute "monthNamesShort" as:

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

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

回答by Arzon Barua

//jquery UI datepicker

//jquery UI日期选择器

Here MM show the full name of month

这里MM显示月份全称

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