JQuery日期时间选择器-只需要选择月份和年份
我阅读了这篇文章的jQuery UI DatePicker to show month year only，它对我非常有帮助，以便修改datetime选择器UI以适合我的情况。
但是当我在同一个表单上有几个datetime选择器时，就会发生这种情况。css display:none的目的是“隐藏”不显示的日子。但是如果我在同一个表单上有几个日期时间选择器，但只有一个我希望成为其中一个月选择器，我该如何实现呢？使用css，它可以使所有日期时间日历UI上的所有日期消失，因为css将更改.ui-datepicker- since的属性。欢迎提出任何建议。
回答 7
Stack Overflow用户
发布于 2010-11-17 15:27:23
目前，datepicker每页只创建一个元素，所有“datepicker”输入共享，因此链接问题的答案不起作用。beforeShow事件不允许使用.addClass()或.css()编辑datepicker元素(因为元素结构在显示时从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>Stack Overflow用户
发布于 2011-02-16 10:00:54
我使用了Ben发布的代码的一个稍微不同的版本。而不是依赖于焦点事件，我添加了
inst.dpDiv.addClass('monthonly');添加到beforeShow方法中，并
inst.dpDiv.removeClass('monthonly');进入onClose。这将在所有datepicker小部件使用的公共div上添加和删除一个类。然后可以在css中以日期日历div为目标，使用
.monthonly#ui-datepicker-div .ui-datepicker-calendar
{
display: none;
}Stack Overflow用户
发布于 2011-02-23 16:47:43
以前的解决方案不能使用不同的格式。此外，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;
}https://stackoverflow.com/questions/4079525
复制
相似问题
jQuery日期选择器只选择月份和年份？
JQuery日期选择器:重新填充月份和年份
jQuery ui -日期选择器:月份和年份下拉css
jQuery日期选择器首先选择年份，然后选择月份
角度2，月份和年份只需要在日期选择器中使用
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
