更改月份时如何防止jQuery的日期选择器闪烁？

Question

我创建了一个 jQuery 日期选择器，它有一些日期（周末、节假日）。事实是，对这些日子进行着色的决定取决于一个 ajax 调用，该调用返回必须为一个月中的哪些日子着色。

当我单击按钮更改月份时，ajax 调用完成，它返回要着色的日期，日期选择器闪烁，然后正确显示月份。我想在 ajax 调用完成后显示新月份，而不是更早。有什么办法可以避免闪烁吗？它在 Internet Explorer 中似乎可以正常工作，但在 Firefox 中无法正常工作。

Image

编辑

如果您单击更改月份按钮，日期选择器会为该月中的每一天调用 beforeShowDay 来呈现它。如果您在 console.log 行中放置一个断点（jsfiddle 示例如下），您将看到 datepicker 已关闭，并且直到每天绘制它才会呈现。就我而言，我想保持旧月份直到新月份完全绘制。

在下面你可以看到的例子中，日历的绘制速度非常快，月份的日期渲染得如此之快以至于它似乎是即时的，但是如果你执行一些检索数据库数据的 ajax 调用决定每天的颜色，月份闪烁。与 Internet Explorer 不同，这个问题在 Firefox 中发生在我身上。

我该如何解决？

小提琴示例：

http://jsfiddle.net/b6V3W/370/

beforeShowDay: tratarDiasEspeciales,

function tratarDiasEspeciales(date){
   ajax call to decide the colour of the cell

   if(condition){
      //colour the day with blue
      return[true,'blue']
   }else{
     //colour the day with red
     return[true,'red']
   }
}

Answer 1

我通过修改你的创建了另一个fiddle。在这里，我将您的业务逻辑部分（从数据库中检索数据以决定颜色的 ajax 调用）带入 onChangeMonthYear 回调函数。

$("#dater").datepicker('option', 'onChangeMonthYear', onChangeMonthYearCustom);

在这里您可以填充一个名为 renderDates 的数组，该数组将包含用于着色日期的所有数据，重要的是此回调函数在执行时保持当前呈现的日历 UI，并且此回调函数在“beforeShowDay”回调函数之前调用。我在执行时设置了调试点并确保是这种情况。因此，现在在“beforeShowDay”回调中，您的代码不必等待 ajax 调用结束，从而满足您的要求。请检查此解决方案，让我知道它是否按预期工作。

Answer 2

该问题的解决方案是使用名为 jquery-ui.custom-1.9.1.custom.js 的库。在该库中，有以下代码行：

inst.dpDiv.empty().append(this._generateHTML(inst));

该行首先删除日期选择器的数据（带有月份和年份数据以及日期的标题），然后使用 generatedHTML 函数附加新月份的 html 代码。

为了解决这个问题，我将代码分为两部分；首先我得到新的 html 代码，然后我清空 datepicker 的数据以附加新的 html 代码：

var quitar = this._generateHTML(inst);
inst.dpDiv.empty().append(quitar);

使用此解决方案，首先进行 ajax 调用并且日历保持不变（它不会闪烁），然后在新代码准备好时插入。

我知道这不是解决问题的最佳方法（如果我更改 jquery 版本，我也必须更改那里的代码）但这是我找到的唯一方法。