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

我创建了一些jQuery日期选择器，有几天有颜色（周末，节假日）。事实是，那个日子的颜色决定取决于一个ajax调用，它返回一个月中的哪一天必须被着色。如何防止在更改月份时jQuery日期选择器的闪烁？

当我点击按钮更改月份时，ajax调用完成，它返回要着色的日期，dateplicker闪烁，然后正确显示月份。我希望在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'] 
    } 
}

来源

2017-01-02 Jaime

你可以用你的代码创建一个jsfiddle吗？ –

@AminurRashid代码添加。 – Jaime

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

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

该行首先删除日期选择器的数据（标头一个月和一年的数据和天），然后追加新的一个月的HTML代码generatedHTML功能。

为了解决这个问题，我将代码分为两部分：首先，我得到了新的HTML代码，然后我清空datepicker's数据追加新的HTML代码：

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

这种解决方案的Ajax调用由第一和日历保持inmutable（它doesn't闪烁），然后当新代码准备就绪时插入。

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

来源

2017-01-03 15:25:24 Jaime

您是否在我的答案上检查了我的新评论？它应该模拟与你的答案相同的东西（阿贾克斯调用是在渲染开始之前进行的，从而防止闪烁） –

是的，我已经检查过它，它是有道理的。这是一个正确的答案，但是我的应用程序的制作方式很难将代码从一个站点更改为另一个站点（这是一个巨大的方法，我也没有编写它）。为了节省时间，我决定使用我自己的解决方案，但我不会放弃在将来使用你的解决方案。谢谢你的回答和你的时间;） – Jaime

很高兴知道这是一个正确的答案:) –

我已经通过修改公司创造了另一个fiddle。在这里，我已将您的业务逻辑部分（ajax调用来从数据库检索数据以决定颜色）转换为onChangeMonthYear回调函数。

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

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

来源

2017-01-03 14:49:30

我已经尝试过了，但如果您在renderCallendarCallBack函数的第一行中放置断点，它仍然会闪烁。它首先删除datepickers内部的所有html，然后，当新的html准备就绪时，它会插入它。 – Jaime

如果您将断点放入renderCallendarCallBack函数中，那么它显然会停止UI渲染，从而导致闪烁。由于ajax调用将不再驻留在此回调函数中，因此您必须将断点放入onChangeMonthYearCustom回调函数中。 –

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

回答

相关问题