Javascript Jquery UI datepicker setDate不处理formatDate的动态更改

我正在尝试在我的日期选择器的控制窗格中添加一个按钮。它应该允许显示整个月份的名称，而不是特定的日期

我需要这两种行为（日期选择器和月份选择器），但日期格式的动态更改似乎会使小部件崩溃。注释代码也有同样的问题

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

})

var dateToday=新日期（）；
var maxDate=“+365”；
$（'.datepicker'）.datepicker({
minDate:dateToday，
maxDate:maxDate，
日期格式：“dd-mm-yy”，
变化月：对，
变化年：是的，
showButtonPanel：是的，
onChangeMonthYear：函数（年、月、实例）{
var thisCalendar=$（此）；
setTimeout（函数（）{
var buttonPane=$（实例）
.datepicker（“小部件”）
.find（“.ui日期选择器按钮面板”）；
$("", {
文字：“整月”，
单击：函数（）{
var month=$（“#ui datepicker div.ui datepicker month:selected”）.val（）；
var year=$（“#ui日期选择器div.ui日期选择器year:selected”）.val（）；
日期选择器（“选项”、“日期格式”、“MM yy”）；
thisCalendar.datepicker（'setDate'，month+“/01/”+year）；
//thisCalendar.datepicker（'setDate'，新日期（年、月、1））；
//此日历。日期选择器（“刷新”）；
}
}).appendTo（buttonPane）.addClass（“ui日期选择器清除ui状态默认ui优先级主ui角点全部”）；
}, 1);
}
})

---

这把小提琴显示了我的问题：。该按钮仅在下个月出现，而不是当前月份。如果您单击它，它总是显示同一个月（例如2021年8月，从今天开始）。

这似乎是随机的，但是如果您将格式更新移动到按钮单击的第一行，它会工作

试试看

我忘了提到我添加的东西：当省略day组件时，date格式似乎不起作用。因此，如果您使用这条线作为块中的第一条线，它确实有效。不确定这是否真的有帮助：-）

---

它看起来像一个日期选择器错误，当您更改

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

这是你的电话号码

更新：

---

这个解决方案是可行的，但是如果您得到日期：thiscanner.datepicker（'getDate'）；它总是显示今天的日期。这可能是另一个错误吗

一般来说，我不确定这是一个bug还是一个正常行为。 查看datepicker代码，很明显，他们不希望使用部分日期格式（例如年+月，没有日期）

Datepicker不仅将日期值保留为date，它还从输入的文本值中解析它，因此它看起来像这样：

• 我们设置

  MM-yy

  格式
• 我们选择日期
• 日期选择器将

  日期

  对象值转换为文本

  2016年3月

• 目前一切正常，但随后会触发反向过程
• Datepicker解析2016年3月的

  文本，这里是出现问题的地方，它无法解析该文本，并将值重置为
  defaultDate
  （默认情况下是今天）

是解析日期的位置，也是解析失败的位置，解析后它有

年

和

月

值，但

天

的默认值是

-1

，因此它无法构造日期

---

解决方法是将

defaultDate

值设置为与date相同的值，因此当它无法解析文本时，它会返回到我们需要的值。我更新了上面的提琴和代码。

此解决方案有效，但如果您得到日期：

thiscanner.datepicker（'getDate'）它总是显示今天的日期。这可能是另一个bug吗？我将采用你的和@DvS的混合方法。不过，你的答案更完整，也更详细，所以我会接受。请查看我的添加。这似乎是一只虫子。
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));