jQuery ui - datepicker防止刷新onSelect

我正在使用jQuery ui Datepicker显示每年充满“特殊日期”（带颜色）的内嵌日历。 enter image description here 这是为了让用户通过选择范围和其他一些细节来批量特殊日期。jQuery ui - datepicker防止刷新onSelect

$('#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，因为我不喜欢这种行为。

我更喜欢日历不刷新，每次点击它（但这似乎不可能），但我可能不再能够突出我的选择了。

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

来源

2011-05-19 Pierre de LESPINAY

你尝试Yozomiri的解决方案？ – Quaternion 2011-06-28 22:11:21

..工作很好.. – 2012-06-21 15:02:59

我可以在小提琴上看到你的代码吗？我试图达到几乎相同的功能。请尽可能。 – Superman 2015-01-20 10:57:50

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

这是在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事件，然后调用_updateDatepicker（这是什么重绘如果inst.inline是真的。

这是我的解决方法，以防止从形式令人耳目一新，同时保持选择功能：

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

来源

2011-06-04 00:25:48 Yozomiri

+1 _inst.inline = false_保存了一天！ – Quaternion 2011-06-28 22:10:17

1天左右...它节省了很多天！谢谢！ :)有谁知道这是否将在未来的jQuery-UI中设置功能？ – 2014-06-10 23:32:46

这个答案是黄金的重量！ 1000分！坐下！ :-) – jMike 2016-09-19 13:04:16

我几乎同样的问题，像一些other people，我有某种解决方案的....但它是不公平的：

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

它不是完美的，但作品...我LL试着让它工作得很好，直到然后...

编辑：解决补充说：

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

来源

2011-05-26 09:33:48

inst.preventDefault（）< - 不是函数 – 2011-05-30 09:52:05

设置inst.inline为false ONSELECT内将无法正常工作。而不是尝试类似

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

来源

2012-06-14 21:00:19

如果你只是想选择一个单一的一天，那么你必须指定月份和年份中的JQuery：

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

来源

2014-11-21 12:52:45 Florian

在具有对一些datepickers的情况下，页面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/

来源

2015-12-15 11:53:57 user2455668

jQuery ui - datepicker防止刷新onSelect

回答

相关问题