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

时间:2016-02-06 11:16:15

标签: javascript jquery jquery-ui datepicker

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

2 个答案:

答案 0 :(得分:5)

它看起来像一个日期选择程序错误,它会更改dateFormat的日期,同时设置minDatemaxDate

解决方案是删除最小/最大日期选项,设置新格式,然后恢复最小/最大:

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是失败的地方,解析后它有yearmonth值,但是默认值day的{​​{1}}为-1,因此无法构建日期。

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

答案 1 :(得分:1)

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

试一试!

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

__write_only pipe int pipe1