jQuery UI datepicker setDate对formatDate的动态更改不起作用

Question

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

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

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月）。

Answer 1

它看起来像一个日期选择器错误，当您更改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));

这是小提琴。

更新：

此解决方案有效，但是如果您获得日期：thisCalendar.datepicker（'getDate'）; 它总是显示今天的日期。可能是另一个错误吗？

总的来说，我不确定这是错误还是正常行为。查看日期选择器代码，很明显，他们不希望使用部分日期格式（例如，年+月，没有日期）。

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

• 我们设置MM yy格式
• 我们选择日期
• Datepicker将Date对象值转换为文本March 2016
• 目前一切正常，但随后将触发向后过程
• Datepicker解析March 2016文本，这是出问题的地方，它无法解析文本并将值重置为defaultDate（默认为今天）

这里是他们解析日期的地方，这里是它失败的地方，解析它之后year和month价值，但默认值day是-1，因此它不能构造日期。

解决方法是将defaultDate值设置为与日期相同的值，因此当它无法解析文本时，它会退回到我们所需的值。我更新了上面的小提琴和代码。