我正在尝试在datepicker的控件窗格中添加一个按钮。它应该允许显示整月的名称,而不是特定的日期。
我需要两种行为(日期选择器和月份选择器),但似乎日期格式的动态更改会导致窗口小部件崩溃。评论代码有同样的问题。
var dateToday = new Date();
var maxDate = "+365";
$('.datepicker').datepicker({
minDate: dateToday,
maxDate: maxDate,
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onChangeMonthYear: function(year, month, instance) {
var thisCalendar = $(this);
setTimeout(function() {
var buttonPane = $(instance)
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Whole month",
click: function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker("option", "dateFormat", "MM yy");
thisCalendar.datepicker('setDate', month + "/01/" + year);
//thisCalendar.datepicker('setDate', new Date(year, month, 1));
//thisCalendar.datepicker("refresh");
}
}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
}, 1);
}
})
这个小提示显示了我的问题:https://jsfiddle.net/mLewc6ep/3/。该按钮仅在下个月出现,而不是当前按钮。如果你点击它,它总是显示同一个月(例如2021年8月,截至今天)。
答案 0 :(得分:5)
它看起来像一个日期选择程序错误,它会更改dateFormat
的日期,同时设置minDate
和maxDate
。
解决方案是删除最小/最大日期选项,设置新格式,然后恢复最小/最大:
thisCalendar.datepicker("option", "minDate", null);
thisCalendar.datepicker("option", "maxDate", null);
thisCalendar.datepicker("option", "dateFormat", "MM yy");
thisCalendar.datepicker("option", "minDate", dateToday);
thisCalendar.datepicker("option", "maxDate", maxDate);
// a hack to trick the datepicker and keep the date we set
thisCalendar.datepicker("option", "defaultDate", new Date(year, month, 1));
thisCalendar.datepicker('setDate', new Date(year, month, 1));
这是fiddle。
更新
此解决方案有效,但如果您获得日期:thisCalendar.datepicker(&#39; getDate&#39;);它总是显示今天的日期。可能是另一个错误吗?
一般来说,我不确定这是错误还是正常行为。 查看datepicker代码,很明显他们没有预料到部分日期格式(例如年+月,没有日期)。
Datepicker并不仅仅将日期值保留为日期,它还会根据输入的文本值对其进行解析,因此它看起来像这样:
MM yy
格式Date
对象值转换为文本March 2016
March 2016
文本,这里出现问题,无法解析它并将值重置为defaultDate
(默认为今天) Here是解析日期的地方,here是失败的地方,解析后它有year
和month
值,但是默认值day
的{{1}}为-1
,因此无法构建日期。
解决方法是将defaultDate
值设置为与日期相同的值,因此当它无法解析文本时,它会回退到我们需要的值。我更新了上面的小提琴和代码。
答案 1 :(得分:1)
这似乎是随机的,但是如果您将格式的更新移动到按钮单击的第一行,它就会起作用。
试一试!
我忘了提到的一些事情,我补充说:日期格式在省略日期组件时似乎不起作用。因此,如果您使用此行作为块中的第一行,它确实有效。不确定这是否真的有用: - )
__write_only pipe int pipe1