display:none的目的是“隐藏”不需显示的天数。但是，如果在同一个表单上有多个日期时间选择器，而我只想将其中一个设置为月份选择器，该怎么办？由于CSS将更改.ui-datepicker-calendar的属性，因此它会使所有日期时间日历界面上的天数都消失。欢迎提出任何建议。目前，日期选择器每页只创建一个元素，所有“datepicker”输入都共享该元素，因此链接问题的答案无效。 beforeShow事件不允许使用.addClass()或.css()编辑datepicker元素（因为在显示时从datepicker脚本刷新元素结构）。
为了解决这个问题，我发现输入元素的focus事件似乎在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>
inst.dpDiv.addClass('monthonly');
将其放入beforeShow方法中
inst.dpDiv.removeClass('monthonly');
在onClose中添加和删除通用div上的类。这会增加或移除所有日期选择器小部件使用的通用div上的类。然后可以使用CSS定位日期日历div。
.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
display: none;
}
以前的解决方案不能处理不同的格式。同时在 beforeShow 中使用 setDate 也没有效果。正确的方式是：
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");
}
#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); - user2444499<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的月份，所以会导致堆栈溢出。
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);
}
这个代码在我这里运行得非常完美：
$(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" />