JQuery 日期时间选择器 - 只需要选择月份和年份
Posted
技术标签:
【中文标题】JQuery 日期时间选择器 - 只需要选择月份和年份【英文标题】：JQuery Datetime picker - Need to pick month and year only 【发布时间】：2011-05-04 00:46:25 【问题描述】：我浏览了这篇 jQuery UI DatePicker to show month year only 的帖子，这对我很有帮助，可以破解日期时间选择器 UI 以适应我的情况。
但由于我在同一个表单上有多个日期时间选择器，所以会发生这种情况。 css display:none 旨在“隐藏”不显示的日期。但是，如果我在同一个表单上有多个日期时间选择器，但我希望将其中一个设为月选择器，我该如何实现呢？使用 thw css，它会使所有日期时间日历 UI 上的所有天都消失，因为 css 将更改 .ui-datepicker-calendar 的属性。欢迎提出任何建议。
【问题讨论】：
【参考方案1】：目前，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>
【讨论】：
用空参数调用日期选择器的行是什么？它有什么作用？ @Nassign - 此页面上有两个日期选择器。带空参数的 datepicker 调用仅用于创建具有默认功能的第二个 datepicker。 谢谢。我找到了一个将自定义按钮添加到按钮面板的网站。但是每次更改月份并且更改“现在”按钮时，该按钮都会消失。有什么建议吗？这是网站链接：csharptechies.blogspot.com/2010/12/… @Nassign - 如果您创建一个新问题，您可能会得到更快更好的答案。 效果很好，但是当日期选择器尝试出现在输入上方时，我遇到了 css 定位问题。我在这里提出了一个新问题：***.com/questions/5816749/…【参考方案2】：我使用了 Ben 发布的代码版本略有不同。 而不是依赖我添加的焦点事件
inst.dpDiv.addClass('monthonly');
进入 beforeShow 方法和
inst.dpDiv.removeClass('monthonly');
进入onClose。这会在所有 datepicker 小部件使用的公共 div 上添加和删除一个类。然后可以使用
在 css 中定位日期日历 div.monthonly#ui-datepicker-div .ui-datepicker-calendar
display: none;
【讨论】：
希望我读过这篇文章。这种方法可以防止日历出现在输入上方时的定位错误。 （见：***.com/questions/5816749/…）【参考方案3】：以前的解决方案不适用于不同的格式。 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;
【讨论】：
我在删除 ui-monthpicker 类时添加了超时，否则日历会在日期选择器隐藏之前“闪烁”。setTimeout(function () inst.dpDiv.removeClass("ui-monthpicker"); , 200);【参考方案4】：
我还有另一个基于上述改进的解决方案。在我的 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 的月份。
【讨论】：
【参考方案5】：我做了类似的事情，但是做了一个单独的 datepicker 脚本的“版本”，并称之为monthpicker，它有自己的 CSS 选择器和 CSS 文件。这意味着您可以在同一页面上使用其中一个或两个。
【讨论】：
您好感谢您的友好回复，可以进一步解释它，好吧我从 jquery.ui.datetimepicker.js 复制另一个 .js 文件调用monthpicker.js，那么下一步应该解释什么你“拥有自己的 CSS 选择器和 CSS 文件”？ @Darren - 您需要挑选代码并查看脚本如何将选择器/ID 分配给它创建的项目，并将它们更改为使用“monthpicker”而不是“datepicker”。然后，您需要复制 CSS 文件并在那里进行匹配的更改。 好吧，只是想知道我是否可以使用css继承来选择属于我在中唯一的日期选择器的类.ui-datepicker-calendar ?【参考方案6】：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);
【讨论】：
【参考方案7】：这个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" />
【讨论】：
以上是关于JQuery 日期时间选择器 - 只需要选择月份和年份的主要内容，如果未能解决你的问题，请参考以下文章
android有月份选择器吗?或者怎么让日期选择器的日期不显示,只显示年份和月份