jQuery ui - datepicker阻止刷新onSelect

问题描述

我正在使用jQuery ui Datepicker显示一个包含特殊日期（带颜色）的年度内联日历。

这是为了允许用户通过选择一个范围和其他细节。

I'm using jQuery ui Datepicker to display a yearly inline calendar full of "special dates" (with colors).This is to allow users to batch special dates by selecting a range and some other details.

$('#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来显示每个日期的详细信息

I'm also using qtip to show the details on each date

我的问题是当我点击日历，它完全重新加载，所以我松开我的qtips。

My problem is when I click on the calendar, it reloads itself entirely, so I loose my qtips.

我不想使用live（）with qtip因为我不喜欢这个行为。

I'd prefer not to use live() with qtip because I don't like the behavior.

我还希望日历不会刷新每次点击它（但这不会似乎可能无论如何），但我可能不再能够突出我的选择了。

I'd also prefer that the calendar not refresh each time I click on it (but this does not seem possible anyway) but I would probably no longer be able to highlight my selection anymore.

你有建议我的问题吗？

推荐答案

我有一个类似的问题。我正在添加自定义按钮到datepicker的底部（使用$（id）.append），但是当我选择一个日期datepicker将刷新并销毁它们。

I was having a similar problem. I was adding custom buttons to the bottom of the datepicker (using $(id).append), but when I would select a date the datepicker would refresh and destroy them.

这是jquery-ui库中datepicker的日期选择功能：

This is the date selection function for the datepicker in the jquery-ui library:

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

正如你所见，功能第一调用onSelect事件，然后调用_updateDatepicker（这是什么重绘表单），如果inst.inline为true。

As you can see, the function first calls the onSelect event, and then calls _updateDatepicker (which is what redraws the form) if inst.inline is true.

这是我的解决方法，以防止表单刷新维护选择功能：

This is my workaround to prevent the form from refreshing while maintaining the selection functionality:

$("#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");
      }
    });
  }
});

这篇关于jQuery ui - datepicker阻止刷新onSelect的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！