如何在jQuery-UI Datepicker中重载数据

How to reload data in jQuery-UI Datepicker?

本文关键字：重载 数据 Datepicker jQuery-UI      更新时间：2023-09-26

情况如下:

我有jquery - ui datepicker从jquery ajax请求传递数据。

$(document).ready(function() {
$.ajax({
  url: "load-calendar",
  dataType: "json",
  success: function(calendarEvents){
         $("#calendar_1").datepicker({
            beforeShowDay: function(date) {
               var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
               for (i = 0; i < calendarEvents.length; i++) {
                   if($.inArray(y + '-' + (m+1) + '-' + d,calendarEvents) != -1) {
                       return [true, 'ui-state-busy', false];
                   }
               }
               return [true];
           }
          });
  }
});
});

它工作得很好，我可以看到日历突出显示繁忙的日子。

现在我想自动刷新这个日历(每分钟)，这样用户就可以自动看到新的突出显示的日子。这可能吗?

我已经尝试使用setInterval函数，但是没有成功。

所以欢迎任何经验/想法。

如果您的ajax响应足够快，您可以在日期选择器的beforeShow事件中进行调用:

$('#calendar_1').datepicker({
   beforeShow: function(input, inst) { //code to update calandar events here// }
});

如果使用日期picker inline:

function refreshDatePicker(){
    //your ajax call here
}
$(function(){
   // Document is ready
   setInterval ( "refreshDatePicker()", 1000 );
 });

我已经解决了这个问题:

<div id="show_calendars"></div>
$(document).ready(function() {
   var update = function(){
        $('#show_calendars')
             .load('/reload-calendars')
             .fadeIn("slow");
   };
   var auto_refresh = setInterval(function(){update();}, 10000);
   update();
});

Function reload-calendar :

<div id="calendar_1"></div>
$(document).ready(function() {
var busyDays = [<? echo $data;?>];
var date = new Date();
 $( "#calendar_1").datepicker({
     dateFormat: 'yy-mm-dd',
     beforeShowDay: function(date) {
         var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
         for (i = 0; i < busyDays.length; i++) {
             if($.inArray(y + '-' + (m+1) + '-' + d,busyDays) != -1) {
                 return [true, 'ui-state-busy', false];
             }
         }
         return [true];
     }
 });
});
相关文章：