jquery-ui - jQuery ui - datepicker 防止刷新 onSelect

Question

我正在使用 jQuery ui Datepicker 来显示充满“特殊日期”(带颜色)的年度内嵌日历。 这是为了允许用户通过选择范围和一些其他详细信息来批量处理特殊日期。

$('#calendar').datepicker({
  ...
  , onSelect: function (selectedDate, inst) {
      $('.date_pick').toggleClass('focused');
      if ($('.date_pick.end').hasClass('focused')) {
        $('.date_pick.end').val('');
      }
      # inst.preventDefault() ? <- not a function
      # inst.stopPropagation() ? <- not a function
      # return (false) ? <- calendar refreshes anyway
    }
  ...
});

我还使用 qtip 显示每个日期的详细信息

我的问题是，当我单击日历时，它会完全重新加载自己，因此我失去了 qtips。

我不想将 live() 与 qtip 一起使用，因为我不喜欢这种行为。

我还希望每次点击日历时都不会刷新(但这似乎不可能)，但我可能无法再突出显示我的选择。

您对我的问题有什么建议吗？

Answer 1

我也遇到了类似的问题。我将自定义按钮添加到日期选择器的底部(使用 $(id).append)，但是当我选择日期时，日期选择器会刷新并销毁它们。

这是jquery-ui库中日期选择器的日期选择函数:

_selectDate: function(id, dateStr) {
  ...
    if (onSelect)
        onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);
  ...
    if (inst.inline)
        this._updateDatepicker(inst);
  ...
},

如您所见，该函数首先调用 onSelect 事件，然后如果 inst.inline 为 true，则调用 _updateDatepicker(这将重绘表单)。

这是我在保持选择功能的同时防止表单刷新的解决方法:

$("#cal_id").datepicker({
  onSelect: function(date, inst){

    //This is the important line.
    //Setting this to false prevents the redraw.
    inst.inline = false;

    //The remainder of the function simply preserves the 
    //highlighting functionality without completely redrawing.

    //This removes any existing selection styling.
    $(".ui-datepicker-calendar .ui-datepicker-current-day").removeClass("ui-datepicker-current-day").children().removeClass("ui-state-active");

    //This finds the selected link and styles it accordingly.
    //You can probably change the selectors, depending on your layout.
    $(".ui-datepicker-calendar TBODY A").each(function(){
      if ($(this).text() == inst.selectedDay) {
        $(this).addClass("ui-state-active");
        $(this).parent().addClass("ui-datepicker-current-day");
      }
    });
  }
});