jQuery UI DatePicker只显示月份和年份

小开

< p >的事: http://www.mattkruse.com/javascript/calendarpopup/ < / p >

选择月-选择示例

小开

使用onSelect回调并手动删除年份部分，并手动设置字段中的文本

小开

在jQueryUI.com上搜索datepicker后，以下是我对你问题的结论和答案。

首先，我会对你的问题说没有。你不能只使用jQueryUI datepicker来选择月份和年份。不支持。它没有回调函数。

但你可以通过使用css隐藏日期等，将它黑到显示只有月份和年份。我认为这没有意义因为你需要点击日期来选择日期。

我只能说你得用另一个约会工具。就像罗杰建议的那样。

小开

最佳答案

这是一个破解(更新了完整的。html文件):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

<强>编辑 Jsfiddle为上面的例子: http://jsfiddle.net/DBpJe/7755/ < / p >

<强>编辑2 仅在单击完成按钮时将月年值添加到输入框。也允许删除输入框的值，这是不可能在上述领域 http://jsfiddle.net/DBpJe/5103/ < / p >

<强>编辑3 更新了更好的解决方案，基于rexwolf的解决方案 http://jsfiddle.net/DBpJe/5106 < / p >

小开

@Ben克勒，这是完美!我做了一个小修改，以便多次使用日期选择器的单个实例可以正常工作。如果不进行此修改，日期将被错误地解析，并且先前选择的日期不会突出显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

小开

我知道这是一个有点晚的回应，但我在几天前遇到了同样的问题，我来了一个很好的&顺利的解决方案。首先，我找到了这个伟大的日期选择器在这里

然后我刚刚更新了CSS类(jquery.calendarPicker.css)，它像这样随示例而来:

.calMonth {
/*border-bottom: 1px dashed #666;
padding-bottom: 5px;
margin-bottom: 5px;*/
}


.calDay
{
display:none;
}

当你改变任何东西时，插件会触发一个事件DateChanged，所以你没有点击某一天并不重要(它适合作为年和月选择器)

希望能有所帮助!

小开

<style>
.ui-datepicker table{
display: none;
}

<script type="text/javascript">
$(function() {
$( "#manad" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
actDate = datestr.split('-');
year = actDate[0];
month = actDate[1]-1;
$(this).datepicker('option', 'defaultDate', new Date(year, month));
$(this).datepicker('setDate', new Date(year, month));
}
}
});
});

这将解决问题=)但我想要的timeFormat yyyy-mm

不过只在FF4中尝试过

小开

如果有人想也为多个日历它不是很难添加这个功能到jquery ui。与缩小搜索:

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

把这个加在x前面

var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

搜索

<table class="ui-datepicker-calendar

并将其替换为

<table class="ui-datepicker-calendar'+accl+'

也可以搜索

this._defaults={

将其替换为

this._defaults={justMonth:false,

对于CSS，你应该使用:

.ui-datepicker table.ui-datepicker-just_month{
display: none;
}

所有这些都完成后，只需转到所需的datepicker init函数并提供设置变量

$('#txt_month_chart_view').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
justMonth: true,
create: function(input, inst) {
$(".ui-datepicker table").addClass("badbad");
},
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});

justMonth: true是这里的关键:)

小开

我有日期选择器与月份选择器混合的问题。我是这样解的

    $('.monthpicker').focus(function()
{
$(".ui-datepicker-calendar").show();
}).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM/yy',
create: function (input, inst) {


},
onClose: function(dateText, inst) {
var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();


}
});

小开

这个代码对我来说是完美无缺的:

<script type="text/javascript">
$(document).ready(function()
{
$(".monthPicker").datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,


onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
}
});


$(".monthPicker").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
});
</script>


<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

输出是:

小开

是只有我或这是不工作，因为它应该在IE(8)? 当单击done时，日期会发生变化，但日期选择器会再次打开，直到您实际单击页面中的某个地方，将焦点分散到输入字段…

我想解决这个问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

小开

我还需要一个月份选择器。我做了一个简单的一年在标题和3行4个月下面。看看它:简单的月份和年份选择jQuery。

小开

我今天也有同样的需求，在github上找到了这个，使用jQueryUI工作，并在日历中有月份选择器来代替日期

https://github.com/thebrowser/jquery.ui.monthpicker < a href = " https://github.com/thebrowser/jquery.ui.monthpicker " > < / >

小开

对上面BrianS近乎完美的回答做了一些改进:

我对显示的值集进行了regexed，因为我认为在这种情况下，它实际上使它更具可读性(尽管注意，我使用的格式略有不同)

我的客户不想要日历，所以我添加了一个显示/隐藏类，在不影响任何其他日期选择器的情况下做到这一点。类的删除是在一个定时器上，以避免表在日期选择器淡出时闪回，这在IE中似乎非常明显。

编辑:剩下要解决的一个问题是没有办法清空datepicker -清除字段并单击离开，它重新填充所选的日期。

EDIT2:我还没有设法很好地解决这个问题(即没有在输入旁边添加一个单独的清除按钮)，所以最终只使用这个:https://github.com/thebrowser/jquery.ui.monthpicker -如果有人能得到标准的UI一个来做这件事，那将是惊人的。

    $('.typeof__monthpicker').datepicker({
dateFormat: 'mm/yy',
showButtonPanel:true,
beforeShow:
function(input, dpicker)
{
if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
{
var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);


$(this).datepicker('option', 'defaultDate', d);
$(this).datepicker('setDate', d);
}


$('#ui-datepicker-div').addClass('month_only');
},
onClose:
function(dt, dpicker)
{
setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);


var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();


$(this).datepicker('setDate', new Date(y, m, 1));
}
});

你还需要这样的样式规则:

#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}

小开

以上答案都很不错。我唯一的抱怨是，一旦设置了值，就不能清除它。另外，我更喜欢像插件一样扩展jquery的方法。

这对我来说非常合适:

$.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "MM yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: ""
}, options);
function hideDaysFromCalendar() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
$('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
}
$(this).datepicker(options).focus(hideDaysFromCalendar);
}

然后像这样调用:

$('input.monthYearPicker').monthYearPicker();

小开

我需要一个月/年选择两个字段(从&到)，当选择一个时，Max/Min设置在另一个上…比如挑选机票日期。我在设置最大值和最小值时遇到了问题…其他字段的日期将被删除。感谢上面的几篇文章……我终于明白了。您必须以非常特定的顺序设置选项和日期。< / p >

完整的解决方案:月/年选择器@ JSFiddle

代码:

var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtFrom").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
}
},
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
var to = $("#txtTo").val();
$("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
if (to.length > 0) {
var toyear = to.substring(to.length - 4, to.length);
var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
$("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
}
}
});
$("#txtTo").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtTo").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
}
},
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
var from = $("#txtFrom").val();
$("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
if (from.length > 0) {
var fryear = from.substring(from.length - 4, from.length);
var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
$("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
}


}
});

也可以像上面提到的那样把它添加到一个样式块中:

.ui-datepicker-calendar { display: none !important; }

小开

我喜欢@user1857829的回答和他的“扩展jquery-like-a-plugin方法”。我只是做了一点修改，当你以任何方式改变月份或年份时，选择器实际上会在字段中写入日期。我发现我喜欢这种行为后使用它一点

jQuery.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
onChangeMonthYear: writeSelectedDate
}, options);
function writeSelectedDate(year, month, inst ){
var thisFormat = jQuery(this).datepicker("option", "dateFormat");
var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
inst.input.val(d);
}
function hideDaysFromCalendar() {
var thisCalendar = $(this);
jQuery('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
jQuery('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
thisCalendar.datepicker("hide");
});
}
jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}

小开

这是我想到的。它隐藏了日历，而不需要额外的样式块，并添加了一个清除按钮，以解决单击输入后无法清除值的问题。同样适用于同一页面上的多个月份选择器。

HTML:

<input type='text' class='monthpicker'>

JavaScript:

$(".monthpicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm",
showButtonPanel: true,
currentText: "This Month",
onChangeMonthYear: function (year, month, inst) {
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
},
onClose: function(dateText, inst) {
var month = $(".ui-datepicker-month :selected").val();
var year = $(".ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
}).after(
$("<a href='javascript: void(0);'>clear</a>").click(function() {
$(this).prev().val('');
})
);

小开

我尝试了这里提供的各种解决方案，如果您只是想要几个下拉列表，它们工作得很好。

最好的(外表等)这里建议的'picker' (https://github.com/thebrowser/jquery.ui.monthpicker)基本上是旧版jquery-ui datepicker的副本，其中_generateHTML被重写。然而，我发现它不再与当前的jquery-ui(1.10.2)很好地发挥，并有其他问题(esc不关闭，在其他窗口小部件打开时不关闭，有硬编码的样式)。

我没有试图修复那个月份选择器，也没有用最新的日期选择器重新尝试相同的过程，而是钩入了现有日期选择器的相关部分。

这包括重写:

_generateHTML(构建月份选择器标记)
parseDate(因为它不喜欢没有day组件)，
_selectDay (datepicker使用.html()获取日期值)

由于这个问题有点老，并且已经得到了很好的回答，这里只有_selectDay覆盖来展示这是如何完成的:

jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
// "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};

如上所述，这是一个老问题，但我发现它有用，所以想添加反馈与替代解决方案。

小开

如果你正在寻找月份选择器，请尝试jquery.mtz.monthpicker

这对我很有效。

options = {
pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
selectedYear: 2010,
startYear: 2008,
finalYear: 2012,
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};


$('#custom_widget').monthpicker(options);

小开

我综合了以上许多好的答案，得出了以下结论:

    $('#payCardExpireDate').datepicker(
{
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
}
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});

这被证明是有效的，但面临许多bug，所以我被迫在datepicker的几个地方打补丁:

if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
$(".ui-datepicker-calendar").hide();
}

patch1: in _showDatepicker:平滑隐藏;

patch2: in _checkOffset:纠正月份选择器的定位(否则当字段位于浏览器底部时，偏移量检查关闭);

patch3:在_hideDatepicker的onClose:否则关闭日期字段将闪烁很短的一段时间，这是非常恼人的。

我知道我的解决办法还远远不够好，但现在它正在工作。希望能有所帮助。

小开

对于月份选择器，使用jQuery v1.7.2

我有以下javascript正在做的事情

$l("[id$=txtDtPicker]").monthpicker({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
// Default is 'mm/yyyy' and separator char is not mandatory
pattern: 'yyyymm',
monthNames: [
'Jan',
'Fev',
'Mar',
'Abr',
'Mai',
'Jun',
'Jul',
'Ago',
'Set',
'Out',
'Nov',
'Dez'
]
});

小开

像许多其他人一样，我在尝试这样做时遇到了许多问题，只有发布的解决方案的组合，最终一个大hack使其完美，给我带来了解决方案的工作与所有的日期格式和本地化，就像正常的数据采集器一样。

我在这个帖子中尝试过的其他解决方案的问题:

在一个datepicker中选择一个新的日期，也会改变其他datepicker的(内部)日期，所以当你再次打开其他的datepicker(或试图获得他们的日期)时，他们会有一个不同的日期显示在他们指定的输入字段中。
约会者不会“记住”;再次打开日期。
处理日期的代码使用子字符串，所以它不兼容所有格式。
输入字段没有正确更新，如果你输入了一个格式错误的日期输入字符串，然后在日期选择器上单击“关闭”。
月份选择器只在关闭输入字段时更改输入字段，而不是在值更改时更改输入字段。
你不能在同一页上有普通的日期选择器，它显示日期，而月份选择器不显示日期。

我终于找到了一种方法解决所有这些问题，甚至在原来的datepickers!

你不需要使用下面的monthpicker脚本来修复正常的jQuery datepicker中的前四个问题。简单地使用本文后面的Datepicker实例化脚本。问题5和问题6只涉及我尝试过的不同的月份选择解决方案。

问题1-3和问题5涉及如何在其内部代码中引用日期和月份选择器，以确保它们不会干扰其他日期和月份选择器，以及手动更新选择器。您可以在下面的实例中看到这一点。第四个问题是通过向datepicker函数添加一些自定义代码来解决的(参见示例中的注释，特别是关于onClose的注释)。

对于第六个问题，也就是最后一个问题，只涉及月份选择者和日期选择者的使用，我们只需要正确地分离日期选择器和月份选择器。

所以，为什么不得到一个自定义的jQuery-UI月份选择插件呢? 当我写这篇文章时，我发现它们缺乏本地化灵活性/能力，有些缺乏动画支持……那么，该怎么办呢?Roll your &;own;来自datepicker代码!这为你提供了一个功能完整的月份选择器，具有日期选择器的所有功能，只是没有显示天数

我使用下面描述的方法，在jQuery-UI v1.11.1代码中提供了monthpicker js-script和附带CSS-script。只需将这些代码段复制到两个新文件中，分别是monthpicker.js和monthpicker.css，并使用下面的实例化代码段。

如果你想阅读有关我把日期选择器转换成月份选择器的简单过程的内容，请向下滚动到最后一节。然后你可以用一个更新版本的jQuery-UI重复这个过程。

现在向页面添加日期选择器和月份选择器!

下面这些javascript代码片段与页面上有多个日期选择器和/或月份选择器，没有上述问题!一起工作，通常通过使用'$(this)来修复。很多:)

第一个脚本是一个正常的日期选择者，第二个脚本是“新”;monthpickers。

out- comments 加。，它允许你创建一些元素来清除输入字段，是从Paul Richards的答案中偷来的。

我用的是“MM”yy"在我的月份选择器中使用'yy-mm-dd'格式，在我的日期选择器中使用'yy-mm-dd'格式，但这是与所有格式完全兼容，所以你可以自由使用任何你想要的格式。只需更改“dateFormat”选项。标准选项“showButtonPanel”，“showAnim”和“yearRange”当然是可选的，可根据您的愿望定制。

添加日期选择器

< >强Datepicker实例化。这幅画是从90年前到现在的。它可以帮助您保持输入字段的正确，特别是如果您设置了defaultDate、minDate和maxDate选项，但如果您不这样做，它可以处理它。它将适用于你选择的任何dateFormat

注意:许多“新日期()”;调用看起来很可笑，但我找不到另一种方法来将动态Date打包到声明中，而不为每个部分都这样做，因为我(据我所知)无法在该上下文中创建可重用实例。如果有人知道在设置minDate和maxDate这样的环境中设置增强日期的更好方法，我会非常感激!

        $('#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('');
//    })
//)
;

添加月份选择器

在想要使用月份选择器的页面中包含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"))，以适合你的东西。

我希望这能帮助到一些人。

链接到一些额外的日期和月份选择器设置:

< p > 在每月的最后一天工作的人。从这个月份选择器得到的日期将始终是这个月的最后一天。
< p > 两个合作的月采访者;“start”是在每月的第一天工作，“end”是在每月的最后一天工作。它们都受到彼此的限制，所以在“end”上选择一个在“start”上选择的月份之前的月份，将会使“start”变成与“end”相同的月份。反之亦然。可选:当在“开始”上选择一个月份时，在“结束”上的“minDate”将被设置为该月。要删除此功能，请注释掉onClose中的一行(请阅读注释)。
< p > 两个合作的约会策划者;它们都受到彼此的限制，所以在“end”上选择一个在“start”上所选日期之前的日期，会将“start”更改为与“end”相同的月份。反之亦然。可选:当在'start'上选择日期时，'end'上的'minDate'将被设置为该日期。要删除此功能，请注释掉onClose中的一行(请阅读注释)。

我是如何把日期选择器变成月份选择器的

我已经从jquery-ui-1.11.1.js中获取了所有的javascript代码，并将其粘贴到一个新的js文件中，并替换了以下字符串:

“datepicker"= =比;“monthpicker"
“Datepicker"= =比;“Monthpicker"
“picker"日期;= =比;“月picker"
“picker"日期;= =比;“月picker"

然后我删除了for循环的一部分，它创建了整个ui-datepicker-calendar div(其他解决方案使用CSS隐藏的div)。这可以在_generateHTML: function (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中复制/粘贴属于datepickers的代码到一个新的css文件中，并替换了以下字符串:

“datepicker"= =比;“monthpicker"

小开

添加一个更简单的解决方案

 $(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'M yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});

< p > http://jsfiddle.net/tmnasim/JLydp/
功能< /强>:

只显示月/年

仅在单击完成按钮时将月年值添加到输入框

当点击“完成”时没有“重新打开”行为 < br />------------------------------------
另一个解决方案，工作很好，日期和月在同一页:(也避免了在IE中多次点击前一个按钮的错误，这可能发生，如果我们使用焦点功能)
李JS小提琴link < / >

小开

我对公认的答案有一定的困难，没有其他答案可以用最小的努力作为基础。因此，我决定对已接受答案的最新版本进行调整，直到它至少满足最低的JS编码/可重用性标准。

这里有一种方法更清洁的解决方案比本·克勒的接受答案的第三版(最新版)。此外，它将:

不仅适用于mm/yy格式，也适用于包括李OP MM yy。< / >
不隐藏页面上其他日期选择器的日历。

没有使用datestr隐式污染全局JS对象， month， year等变量

看看吧:

$('.date-picker').datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function (dateText, inst) { var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover'); if (!isDonePressed) return; var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(), year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val(); $(this).datepicker('setDate', new Date(year, month, 1)).change(); $('.date-picker').focusout(); }, beforeShow: function (input, inst) { var $this = $(this), // For the simplicity we suppose the dateFormat will be always without the day part, so we // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'), date; try { date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val()); } catch (ex) { return; } $this.datepicker('option', 'defaultDate', date); $this.datepicker('setDate', date); inst.dpDiv.addClass('datepicker-month-year'); } });

你需要的其他所有东西是下面的CSS:

.datepicker-month-year .ui-datepicker-calendar { display: none; }

就是这样。希望以上内容能节省更多读者的时间。

小开

感谢Ben Koehler的解决方案。

然而，我有一个问题与多个实例的日期选择，其中一些需要与日期选择。Ben Koehler的解决方案(在编辑3中)有效，但在所有情况下都隐藏了日期选择。下面是解决这个问题的更新:

$('.date-picker').datepicker({ dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function(dateText, inst) { if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) { $(this).datepicker( 'setDate', new Date( $("#ui-datepicker-div .ui-datepicker-year :selected").val(), $("#ui-datepicker-div .ui-datepicker-month :selected").val(), 1 ) ).trigger('change'); $('.date-picker').focusout(); } $("#ui-datepicker-div").removeClass("month_year_datepicker"); }, beforeShow : function(input, inst) { if((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = datestr.substring(0, 2); $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1)); $(this).datepicker('setDate', new Date(year, month-1, 1)); $("#ui-datepicker-div").addClass("month_year_datepicker"); } } });

小开

标记回答工作!! 但不是在我的情况下，有多个datepicker，只想实现特定的datepicker
所以我使用dp的实例并找到datepicker Div 并添加hide class

这里的代码

<style> .hide-day-calender .ui-datepicker-calendar{ display:none; } </style> <script> $('#dpMonthYear').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', onClose: function (dateText, inst) { $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); }, beforeShow: function (elem,dp) { $(dp.dpDiv).addClass('hide-day-calender'); //here a change } }); </script>

注意:你不能以.ui-datepicker-calendar为目标并设置css，因为它会在选择/更改时不断呈现

小开

事情是这样的。截至2021年12月

$('.monthpicker').datepicker({ autoclose: true, showButtonPanel: true, viewMode: "months", minViewMode: "months", format: "M-yyyy" })

如果你想保持当前月份的选择，然后添加

$('.monthpicker').datepicker({ autoclose: true, showButtonPanel: true, viewMode: "months", minViewMode: "months", format: "M-yyyy" }).datepicker('setDate', new Date());

小开

我使用了这段代码，并完美地工作

$(".your_input_class").datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, startView: "months", minViewMode: "months" });