Question

我创建了一个jQuery日期选择器，它有一些颜色（周末，假日）。事实上，那天的颜色决定取决于ajax调用，该调用返回该月的哪几天必须着色。

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

Image

修改

如果您点击更改月份按钮，则datepicker会在每月的每一天调用beforeShowDay来呈现它。如果你在console.log行中放置一个断点（下面的jsfiddle示例），你会看到datepicker已关闭，并且在每天绘制之前它不会被渲染。在我的情况下，我想保持旧月，直到新月完全绘制。

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

我该如何解决？

小提琴示例：

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

app.ts

Answer 1

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

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

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

Answer 2

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

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

该行首先删除datepicker的数据（包含月份和年份数据和天数的标题），然后使用 generatedHTML 函数附加新月份的html代码。

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

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

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

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

如何在更改月份时防止jQuery的datepicker闪烁？

2 个答案: