Question

我正在尝试在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月，截至今天）。

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（＆＃39; getDate＆＃39;）;它总是显示今天的日期。可能是另一个错误吗？

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

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

我们设置了MM yy格式
我们选择日期
Datepicker将Date对象值转换为文本March 2016
现在一切正常，但后来的过程被触发
Datepicker解析March 2016文本，这里出现问题，无法解析它并将值重置为defaultDate（默认为今天）

Here是解析日期的地方，here是失败的地方，解析后它有year和month值，但是默认值day的{{1}}为-1，因此无法构建日期。

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

Answer 2

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

试一试！

我忘了提到的一些事情，我补充说：日期格式在省略日期组件时似乎不起作用。因此，如果您使用此行作为块中的第一行，它确实有效。不确定这是否真的有用： - ）

__write_only pipe int pipe1

Jquery UI datepicker setDate无法处理formatDate的动态更改

2 个答案: