[英]jQuery Datepicker - Show full month names in select box
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? 有没有办法自定义datepicker以显示完整的月份名称而无需修改源代码?
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函数之前获取monthnames数组,将它们放入一个新变量并通过调用该变量来更改短名称:
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
}
Even nicer solution would be to use monthNames
from your locale object. 更好的解决方案是使用您的语言环境对象中的
monthNames
。
// jQuery UI datepicker
$("#datepicker").datepicker({
monthNamesShort: $.datepicker.regional["en"].monthNames
});
Dont find better way than updating UI datepicker, but that gives you the idea: 不要找到比更新UI datepicker更好的方法,但这给你的想法:
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'
});
});
You can extend the datepicker and "override" the offending function, passing in the long names. 你可以扩展datepicker并“覆盖”有问题的函数,传入长名称。
$.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. 这样做的好处是可以在下拉列表中显示全名,但允许在使用所选日期设置input元素时在settings / options中指定格式。
You can define attribute " monthNamesShort
" as: 您可以将属性“
monthNamesShort
”定义为:
$(".selector").datepicker({
monthNamesShort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
});
//jquery UI datepicker // jquery UI datepicker
Here MM show the full name of month 这里MM显示月份的全名
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd MM yy',
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.