DatePickerの表示速度が非常に遅い

Question

私のプロジェクトでjquery datepickerを使用しています。私はajaxを使用してデータベースにアクセスし、毎月の変更ごとにハイライト表示する必要がある日付を取得しています。これはonChangeMonthYear：関数（年、月、inst）イベントとbeforeShowDay：function（dateToShow）イベントを使用して行われます。日付は適切に強調表示されていますが、問題はbeforeshowdayイベントの日付を強調するのに時間がかかります。ローカルマシンのアクセス時間が非常に速く、サーバーからの応答時間が強調表示の遅れを引き起こしているという事実がなくなったことをここで指摘したいと思います。

私はまた、期間を使用しようとしました：「速い」、それはどちらか助けていません。

1.日付の表示時間を増やすにはどうすればよいですか？または

2.howすることができます私はできない、カレンダー、日付が表示されているまで、ユーザーは他の月をナビゲートcan`tようになっています。

Answer 1

あなたはそのdisableオプションを使用して、日付ピッカーを有効/無効にすることができるはずです。

$('.selector').datepicker({ 
    onChangeMonthYear: function(year, month, inst) { 
     $(this).datepicker("option", "disabled", true); 
    }, 

    beforeShowDay: function(date) { 
     $(this).datepicker("option", "disabled", false); 
    } 
}); 

Answer 2

イムは、この上で、あなたのアプローチを尋問したいと思いますが、我々はすべての事実を持っていけないので、私は間違っている可能性があります。しかしから、私たちは持って何をすべきか：任意のAJAXのない

アプローチ1.ロードすべての日付のサーバ側を1回だけ少ない回数だけ少しより多くのデータをロードするためのより良い以来。

アプローチ2. 1の場合は、Ajaxを持つすべての日付の可能な負荷ではなく、その後、AJAXコールバックでの日付ピッカーを活性化させます。

アプローチ3.日付バッチそれを可能性があり、少なくともあなたが今後数ヶ月のカップルを持っていることを確認しての膨大な量がある場合。

Answer 3

ビットコードなしでは難しいが、次の試してみる：CSSファイルで

を：

で：

$(function(){$('#calendarContainer').show();}); 
//Will only show when document is ready. 

または日付遅延はページがすでにロードされていても起こる場合#calendarContainer {display:none;} CSSファイル：#calendarContainer {display:none;}

$(function(){ 

var sI = setInterval(function() { 
    if ($('.dateHighlightContainer .dates').hasClass('highlight')) 
    { 
     $('#calendarContainer').show(); 
     clearInterval(sI); 
    } 
}, 1000); 
    }); 
//Check each second - Will stop and display calendar once it finds the class highlight 

チェック詳細のための私の完全な例：http://jsfiddle.net/Jeu5q/

Answer 4

あなたの遅延の問題は、あなたのAjaxの方法で関連していなければなりません。 ここには作業exampleがあります。私はあらかじめ定義された日付の遅延問題に気付かない。

// Highlighted Days 
var dayList = [1, 3, 5, 7, 9, 11 , 13 , 15 , 17 , 19 , 21 , 23 , 25 , 27 ]; 
var monthList = ["Jan", "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov","Dec" ]; 

function createDays(dayList, month, year) { 

    var dateArray = new Array(); 
    $.each(dayList, function(i, value) { 
     dateArray.push(new Date(month.concat(' ', value, ', ', year))); 
    }); 
    return dateArray; 
} 

$(document).ready(function() { 

    $dateArray = createDays(dayList, "Jul", "2011"); 

    $('#datepicker').datepicker({ 
     beforeShowDay: function(_date) { 

      $highLightDay = false;    
      $.each($dateArray , function(i, date) { 
       if (date.valueOf() == _date.valueOf()) {     
        $highLightDay = true; 
       }     
      }); 

      if($highLightDay) 
       return [true, "ui-state-active" ,"Event-".concat(_date)]; 

      return [true, "", ""]; 
     }, 
     onChangeMonthYear: function(year, month, inst) { 
      $dateArray = createDays(dayList, monthList[month-1], year);  

     } 

    }); 

});