JQuery日期时间选择器 – 只需选择月份和年份

我通过这个postjQuery UI DatePicker只显示月份，这对我来说非常有帮助，以便破解日期时间选择器UI以适应我的情况。

但是由于我在同一个表单上有几个日期时间选择器，所以会发生这种情况。 css display:none目标是“隐藏”不显示的日子。 但是，如果我在同一个表单上有几个日期时间选择器但只有一个我希望将其中一个作为monthpicker，那么我该如何实现呢？ 使用thw css，它会使所有日期时间日历UI上的所有日子消失，因为css将更改.ui-datepicker-calendar的属性。 欢迎任何建议。

Answer 1

目前，datepicker每页只创建一个所有’datepicker’输入共享的元素，因此为什么链接问题的答案不起作用。 beforeShow事件不允许使用.addClass（）或.css（）编辑datepicker元素（因为元素结构在显示时会从datepicker脚本中刷新。）

为了解决这个问题，我发现输入元素的焦点事件似乎在显示datepicker后运行代码。 这是一个令人沮丧的问题的简单解决方法。

这是我的代码：

           Date:  End Month:    

Answer 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; } 

Answer 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; } 

Answer 4

基于上述内容我还有另一种解决方案，有一些改进。 在我的HTML中，我通过添加这个来隐藏日期选择器，因为我在页面上只有一个：

然后我初始化我的datepicker，因为其他人已经这样做了，并在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月。

Answer 5

我做了类似的事情，但是制作了一个独立的’版本’的datepicker脚本并称之为monthpicker，拥有它自己的CSS选择器和CSS文件。 这意味着您可以在同一页面上使用其中一个或两个。

Answer 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); } 

Answer 7

这段代码对我来说是完美无缺的：

 $(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) }); }); }); Month: