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

这里是fiddle。

更新：

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

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

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

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

Here 是他们解析日期的地方，here 是它失败的地方，解析后它有year 和month 值，但day 的默认值是-1 ，所以它不能构造日期。

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

Answer 2

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

试一试！

我忘了提到我添加的内容：省略日期组件时，日期格式似乎不起作用。因此，如果您将此行用作块中的第一行，它确实有效。不确定这是否真的有帮助:-)

thisCalendar.datepicker("option", "dateFormat", "dd MM yy");