jQuery UI -日期选择器防止在onSelect时刷新

Question

我正在使用jQuery UI的日期选择器来显示一个包含“特殊日期”（带有颜色）的年度内联日历。 这是为了让用户通过选择一段时间和其他细节来批量添加特殊日期。

$('#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。

我不想使用带有qtip的live()，因为我不喜欢这种行为。

我希望每次单击日历时都不要刷新它（但似乎无法实现），但我可能再也不能突出显示我的选择了。

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

- Pierre de LESPINAY

---

你尝试过Yozomiri的解决方案吗？ - Quaternion

我能在fiddle上看看你的代码吗？ 我正在尝试实现几乎相同类型的功能。 如果可能的话，请提供。 - Superman

很抱歉，这是一个旧项目，我无法再访问代码了。基本上，我使用了 beforeShowDay 回调来应用 CSS。 - Pierre de LESPINAY

这是onSelect和beforeShowDay的组合吗？你是这样处理的，每选择一个日期就应用自定义CSS，还是给它一个日期数组并使用beforeShowDay在它们上应用CSS类？我只需要一个想法。谢谢。 - Superman

不，选择CSS也在beforeShowDay中进行条件判断，因为点击会重新加载整个日期选择器。 - Pierre de LESPINAY

日期选择器('refresh') - 对我有效，谢谢 - Sergey

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

- Yozomiri

---

一天的时间能省下很多天的时间！谢谢！:) 有人知道这个功能在未来的jQuery-UI中是否可以设置吗？ - jave.web

这个答案价值连城！1000分！坐下！ :-) - jMike

Answer 2

在onselect内将inst.inline设置为false不起作用。 相反，尝试类似于以下内容：

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}

- Min Hur

Answer 3

如果页面上有一些日期选择器，Yozomiri 的示例将会失败。你应该这样做：

        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.
            $(this).find(".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.
            $(this).find(".ui-datepicker-calendar TBODY td").each(function(){
              if ( $(this).find('a').text() == inst.selectedDay && $(this).data('month') == inst.selectedMonth ) {
                $(this).find('a').addClass("ui-state-active");
                $(this).addClass("ui-datepicker-current-day");
              }
            });
        }

https://jsfiddle.net/g2bgbdne/3/

- user2455668

Answer 4

我有一个几乎相同的问题，就像一些其他人一样，我有某种解决方案...但这不公平：

$('#calendar').datepicker({
...,
onSelect: function (selectedDate, inst) 
{
  myFunction(selectedDate, inst);
}
});
function myFunction(selectedDate, inst)
{

  $('.date_pick').toggleClass('focused');
  if ($('.date_pick.end').hasClass('focused')) {
    $('.date_pick.end').val('');
  }
  inst.preventDefault(); # aa; works too, but writing aa; is going too far xD
}

它不是完美的，但是可以工作... 我会尽力使其正常工作，直到那时...

编辑：添加以下内容已解决：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

- David Diez

---

inst.preventDefault() <- 不是一个函数。 - Pierre de LESPINAY

Answer 5

如果您只想选择单个日期，则必须在JQuery中指定月份和年份：

$(".ui-datepicker-calendar TBODY [data-month='"+inst.selectedMonth+"'][data-year='"+inst.selectedYear+"'] A").each(function(){

- Florian