我浏览了这篇 jQuery UI DatePicker to show month year only 的帖子，这对我很有帮助，可以破解日期时间选择器 UI 以适应我的情况。
但由于我在同一个表单上有多个日期时间选择器，所以会发生这种情况。 css display:none 旨在“隐藏”不显示的日期。但是，如果我在同一个表单上有多个日期时间选择器，但我希望将其中一个设为月选择器，我该如何实现呢？使用 thw css，它会使所有日期时间日历 UI 上的所有天都消失，因为 css 将更改 .ui-datepicker-calendar 的属性。欢迎提出任何建议。
【问题讨论】：
标签： jquery datetime datepicker
目前，datepicker 每页仅创建 1 个所有“datepicker”输入共享的元素，因此链接问题的答案不起作用。 beforeShow 事件不允许使用 .addClass() 或 .css() 编辑 datepicker 元素（因为元素结构在显示时会从 datepicker 脚本中刷新。）
为了解决这个问题，我发现输入元素的焦点事件似乎在显示日期选择器后运行代码。这是解决令人沮丧的问题的简单解决方法。
这是我的代码：
<!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/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.month-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) {
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', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
$('.date-picker').datepicker();
$('.month-picker').focus(function () {
$('.ui-datepicker-calendar').addClass('hideDates');
});
});
</script>
<style>
.hideDates {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date:</label>
<input name="startDate" id="startDate" class="date-picker" />
<label for="endMonth">End Month:</label>
<input name="endMonth" id="endMonth" class="month-picker" />
</body>
</html>
【讨论】：
我使用了 Ben 发布的代码版本略有不同。 而不是依赖我添加的焦点事件
inst.dpDiv.addClass('monthonly');
进入 beforeShow 方法和
inst.dpDiv.removeClass('monthonly');
进入onClose。这会在所有 datepicker 小部件使用的公共 div 上添加和删除一个类。然后可以使用
在 css 中定位日期日历 div.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
display: none;
}
【讨论】：
以前的解决方案不适用于不同的格式。 setDate 也不会在 beforeShow 中执行任何操作。正确的做法是：
beforeShow: function(input, inst) {
var dateString = $(this).val();
var options = new Object();
if (dateString.length > 0) {
options.defaultDate = $.datepicker.parseDate("dd-" + $(this).datepicker("option", "dateFormat"), "01-" + dateString);
}
inst.dpDiv.addClass("ui-monthpicker");
return options;
},
onClose: function(dateText, inst) {
var month = inst.dpDiv.find(".ui-datepicker-month").val();
var year = inst.dpDiv.find(".ui-datepicker-year").val();
$(this).datepicker("setDate", new Date(year, month, 1));
inst.dpDiv.removeClass("ui-monthpicker");
}
我使用 datepicker 中的 parseDate 来处理不同的日期格式，并从字段中返回日期作为 defaultDate 选项。
必需的 CSS：
#ui-datepicker-div.ui-monthpicker {
padding: 0.2em;
}
#ui-datepicker-div.ui-monthpicker .ui-datepicker-calendar {
display: none;
}
【讨论】：
setTimeout(function () { inst.dpDiv.removeClass("ui-monthpicker"); }, 200);
我还有另一个基于上述改进的解决方案。在我的 HTML 中，我通过添加这个来隐藏日期选择器，因为页面上只有一个：
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
然后我像其他人一样初始化我的日期选择器，并向 onChangeMonthYear 事件添加一些代码：
$n(this).datepicker({
defaultDate: 0,
changeMonth: true,
changeYear: true,
onChangeMonthYear: function(year, month, inst) {
$(this).datepicker('setDate', new Date(year, month - 1, 1));
}
});
注意：
月 - 1
如果你不添加这个，你会得到一个堆栈溢出，因为这个函数接收一个基于 1 的索引月份，但 setDate 使用一个正常的基于 0 的月份。
【讨论】：
我做了类似的事情，但是做了一个单独的 datepicker 脚本的“版本”，并称之为monthpicker，它有自己的 CSS 选择器和 CSS 文件。这意味着您可以在同一页面上使用其中一个或两个。
【讨论】：
Ben 的解决方案效果很好，只是做了一个小改动，我使用了 onChangeMonthYear 而不是 onClose：
onChangeMonthYear: function(year, month, inst) {
var date = new Date(year, month - 1, 1);
$(this).val($.datepicker.formatDate(format, date));
$(this).datepicker('setDate', date);
}
【讨论】：
这个code 对我来说完美无缺：
$(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)
});
});
});
<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />
【讨论】：