像许多其他人一样，我在尝试执行此操作时遇到了许多问题，并且只有发布的解决方案的组合，以及最终使其完美的大技巧， 我找到了解决方案。
我尝试过的该线程中其他解决方案的问题：
- 在日期选择器中选择一个新日期，也会更改其他日期选择器的（内部）日期，因此当您再次打开其他日期选择器（或尝试获取其日期）时，它们的日期将不同于分配给它们的输入中显示的日期。 -领域。
- 再次打开时，日期选择器不会“记住”日期。
- 处理日期的代码使用了子字符串，因此它与所有格式都不兼容。
- “我的月选择器”仅在关闭输入字段时才更改，而不是在值更改时更改。
- 如果您输入日期格式错误的输入字符串，然后单击日期选择器上的“关闭”，则输入字段的更新不正确。
- 我不能在没有显示日期的月份选择器的同一页面上使用显示日期的普通日期选择器。
我终于找到了解决所有这些问题的方法。只需注意在内部代码中如何引用日期和月份选择器，当然还要对手动选择器进行一些手动更新，就可以固定前四个。您可以在底部附近的实例化示例中看到这一点。第五个问题可以通过在datepicker函数中添加一些自定义代码来解决。
注意：您不需要使用以下monthpicker脚本来解决常规datepicker中的前三个问题。只需使用本文底部附近的datepicker实例化脚本即可。
现在，要使用monthpickers并修复最后一个问题，我们需要将datepickers和monthpickers分开。我们可以从那里获得少数jQuery-UI monthpicker插件之一，但是有些缺乏本地化的灵活性/功能，有些缺乏动画支持...那么，怎么办？从日期选择器代码中滚动“自己的”！这为您提供了一个功能齐全的月份选择器，具有日期选择器的所有功能，而无需显示日期。
我提供了monthpicker js脚本和随附的CSS脚本使用下面介绍的方法以及jQuery-UI v1.11.1代码。只需将这些代码片段分别复制到两个新文件，monthpicker.js和monthpicker.css。
如果您想了解将日期选择器转换为月份选择器的相当简单的过程，请向下滚动至最后一部分。
现在将datepickers和monthpickers添加到页面！
以下这些javascript代码段可与页面上的多个datepicker和/或monthpickers一起使用，而没有上述问题！通常通过使用“ $（this）”进行修复。很多 ：）
第一个脚本用于普通的日期选择器，第二个脚本用于“新”月份选择器。
注释过后的.after可让您创建一些元素来清除输入字段，这是从Paul Richards的答案中窃取的。
我在月份选择器中使用的是“ MM yy”格式，在日期选择器中使用的是“ yy-mm-dd”格式，但这与所有格式完全兼容，因此您可以随意使用任何一种格式。只需更改“ dateFormat”选项。当然，标准选项“ showButtonPanel”，“ showAnim”和“ yearRange”是可选的，并且可以根据您的意愿进行自定义。
添加日期选择器
日期选择器实例化。
这可以追溯到90年前，直到今天。它可以帮助您保持输入字段正确，尤其是在您设置defaultDate，minDate和maxDate选项的情况下，但如果不设置它，则可以进行处理。它将与您选择的任何dateFormat一起使用。
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
添加月份选择器
在要使用monthpickers的页面中包括monthpicker.js文件和monthpicker.css文件。
Monthpicker实例化
从该月份选择器检索到的值始终是所选月份的第一天。从当前月份开始，范围从100年前到未来10年。
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
而已！
这就是您进行月份选择的全部。
我似乎无法对此进行jsfiddle处理，但是在我的ASP.NET MVC项目中它对我来说有效。只需执行通常在页面上添加日期选择器并合并上述脚本的操作即可，可能是通过将选择器（意味着$（“＃MyMonthTextBox”））更改为适合您的内容。
我希望这可以帮助别人。
链接到pastebins以获得一些额外的日期和月份选择器设置：
Monthpicker在每月的最后一天工作。您从本月选择器中获得的日期将始终是该月的最后一天。
两个合作的选月者 ; “开始”在每月的第一天工作，“结束”在该月的最后一天工作。它们都受彼此的限制，因此选择在“开始”的所选月份之前的“结束”的月份，会将“开始”更改为与“结束”的月份相同。反之亦然。可选：当选择“开始”的月份时，“结束”的“ minDate”设置为该月。要删除此功能，请在onClose中注释掉一行（请阅读注释）。
两个合作的日期选择器 ; 它们都受彼此限制，因此在“结束”上选择一个在“开始”上选择的日期之前的日期，会将“开始”更改为与“结束”相同的月份。反之亦然。可选：在“开始”上选择日期时，“结束”上的“ minDate”设置为该日期。要删除此功能，请在onClose中注释掉一行（请阅读注释）。
我如何将DatePicker更改为MonthPicker
我已经从jquery-ui-1.11.1.js中获取了与日期选择器有关的所有javascript代码，并将其粘贴到新的js文件中，并替换了以下字符串：
- “ datepicker” ==>“ monthpicker”
- “ Datepicker” ==>“ Monthpicker”
- “日期选择器” ==>“月选择器”
- “日期选择器” ==>“月选择器”
然后，我删除了for循环的一部分，该部分创建了整个ui-datepicker-calendar div（其他解决方案使用CSS隐藏的div）。可以在_generateHTML：函数（inst）中找到。
找到显示以下内容的行：
"</div><table class='ui-datepicker-calendar'><thead>" +
标记所有内容，从关闭div标签后到（不包括）该行所在的行：
drawMonth++;
现在会很不高兴，因为我们需要关闭一些东西。在从之前关闭div标签之后，添加以下内容：
";
现在应该将代码很好地缝合在一起。这是一个代码片段，显示您应该得到的结果：
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
然后，我将jquery-ui.css中与日期选择器有关的代码复制/粘贴到新的CSS文件中，并替换了以下字符串：
- “ datepicker” ==>“ monthpicker”
