JQuery datepicker - 设置回调顺序答案

【问题标题】：JQuery datepicker - set callback orderJQuery datepicker - 设置回调顺序
【发布时间】：2009-10-13 14:47:51
【问题描述】：

我正在使用 JQuery 日期选择器，并在某些日子被禁用的情况下向用户展示它。我网站中的某些用户可以将议程中的某些日子标记为“可用”，可以说是他们的工作时间。他们的可用性必须在日历中反映给其他用户。

我已经在网上搜索过这个，似乎应该为此使用beforeShowDay 事件，这正是我所做的。简而言之，当日期选择器加载时，我调用服务器，解析 json 结果（日期列表），将其推送到数组中，在beforeShowDay 中读取，在这里我检查日期是否在数组。

当我更改月份时，问题就来了。在onChangeMonthYear 中，我再次调用服务器并检索这个新月份的可用信息。但是，似乎 beforeShowDay 在此事件之前被调用 before，这意味着尚未加载任何可用性，并且日历没有显示任何内容。这是一些代码：

var dates = [];

$(document).ready(function() {
  var today = new Date();
  $.post("/AgendaApi/Day/" + today , null, function(json) {
    $.each(json, function(index, result) {
      dates.push(result.AvailableDate);
    });
  }, "json");
});

$(document).ready(function() {
  $('#date').datepicker({
    minDate: new Date(),
    dateFormat: 'dd-mm-yy',
    onChangeMonthYear: function(year, month, thisCalendar) {
      $.post("/AgendaApi/Day/01-" + month + "-" + year, null, function(json) {
        $.each(json, function(index, result) {
          dates.push(result.AvailableDate);
        });
      }, "json");
    },
    beforeShowDay: function(date) {      
      if ($.inArray(date, dates) > -1) {
        return [true, ''];
      }
      return [false, ''];
    }
  });
});

在上面的代码中，我省略了一些特定于文化的日期解析等等，但你明白了。我该如何解决这个问题？因为我想要的是，如果用户更改月份，我首先获取该月的所有可用日期，然后然后日历被“绘制”。不是反过来。我正在使用 asp.net MVC，但这并不重要。非常感谢！

【问题讨论】：

您看到了什么影响？是启用还是禁用所有日期？
他们都被禁用了。这是合乎逻辑的，因为“下个月”的数组中还没有任何日期。数组只在 onChangeMonthYear 被调用后才被填充，不幸的是 after beforeShowDay。

标签： jquery asp.net-mvc datepicker

【解决方案1】：

onChangeMonthYear 在 beforeShowDay 之前：

     /* Action for selecting a new month/year. */
     _selectMonthYear: function(id, select, period) {
      var target = $(id);
      var inst = this._getInst(target[0]);
      inst._selectingMonthYear = false;
      inst['selected' + (period == 'M' ? 'Month' : 'Year')] =
      inst['draw' + (period == 'M' ? 'Month' : 'Year')] =
       parseInt(select.options[select.selectedIndex].value,10);
      this._notifyChange(inst); // onMonthYearChange
      this._adjustDate(target);
     }

     _adjustDate: function(id, offset, period) {
      var target = $(id);
      var inst = this._getInst(target[0]);
      if (this._isDisabledDatepicker(target[0])) {
       return;
      }
      this._adjustInstDate(inst, offset +
       (period == 'M' ? this._get(inst, 'showCurrentAtPos') : 0), // undo positioning
       period);
      this._updateDatepicker(inst);
     },

            //_updateDatePicker makes the call to _generateHtml where the beforeShowDate event is executed:

  _generateHtml{...
      var daySettings = (beforeShowDay ? beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']);

...
   }

【讨论】：

我不确定我明白了。这是日期选择器本身的代码吗？因为不管它说什么，它肯定对我不起作用:-)

【解决方案2】：

我找到了一个解决方案，我猜不是最好的，但它确实有效。我将onChangeMonthYear 事件中的请求更改为同步：

onChangeMonthYear: function(year, month, thisCalendar) {
  jQuery.ajax({
    url: "/AgendaApi/Day/01-" + month + "-" + year,
    success: function(json) {
      $.each(json, function(index, result) {
        dates.push(result.AvailableDate);
      });
    },
    dataType: "json",
    async: false
  });
}

【讨论】：