Jquery UI 日期选择器设置日期不适用于格式日期的动态更改

Jquery UI datepicker setDate not working on dynamic change of formatDate

本文关键字：日期 动态 格式 不适用 UI 选择器 设置 Jquery 适用于      更新时间：2023-09-26

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

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

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

它看起来像一个日期选择器错误，当您更改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'(; 它总是显示今天的日期。 可能是另一个错误？

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

日期

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

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

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

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

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

试一试！

我

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

thisCalendar.datepicker("option", "dateFormat", "dd MM yy");
相关文章：