jQuery Datepicker Beforeshowday - Ajax返回不可用日期數組

Question

我想獲取一個datepicker來更新不可用日期的數組。下面的工作，如果我通過一個PHP變量，但我遇到的問題似乎是正確的返回數據的選項（這是扔的控制檯錯誤無法讀取未定義的0）：

jQuery(document).ready(function() { 
    jQuery('#MyDate').datepicker({ 
     minDate: '+2', 
     maxDate: new Date(2014, 1, 28), 
     dateFormat: 'dd-mm-yy', 

     beforeShowDay: function (date) { 
      //var array = ["<?php echo $comma_seperated;?>"]; 

      jQuery.ajax({ 
       type: "POST", 
       url: "/wp-admin/admin-ajax.php", 
       data: { 
        action: 'unavail_dates', 
        unavaildates: '2' 
       }, 
       success: function (output) { 
        saveVariable(output); 
       } 
      }); 

      function saveVariable(data) { 
       array = '"' + data + '"'; 
       console.log(array); 
       var string = jQuery.datepicker.formatDate('yy/mm/dd', date); 
       return [array.indexOf(string) == -1]; 
      } 
     }, 
     onSelect: function (dateText) { 
      jQuery(this).change(); 
     } 
    }) 

注控制檯日誌顯示與註釋的var數組相同。我正在使用一個函數來使用它的相應代碼中的返回值，但它只是返回一串逗號分隔的日期並且錯過了它的第一個和最後一個「。例如，2013/12/12」，「2013/12/13 「」 2013年12月14日

Answer 1

這是一個有點哈克，但它的工作原理。我不得不創建一個按鈕來調用datepicker。任何代碼我嘗試嘗試相同的元素上的.click事件似乎不及時更新。 .deferred等根本沒有啓動日期選擇器。我能夠得到一個Ajax，然後初始化datepicker，將整個代碼插入元素中的HTML onclick「」中，但我無法用.click重現此操作。

任何方式，我的方法：

1. 創建一個替代按鈕發射(#element).click從
2. 創建Ajax的功能來獲取實時時間（這大約需要五秒鐘，如果你是從測試它適用另一頁實時）。
3. 將datepicker代碼放入成功回調中。
4. 火災.click事件。

步驟1：元素的HTML：

<td><input type="text" id="MyDate" name="MyDate" readonly='true' value="click here" /></td><td><input type="button" id="button" name="button" value="Select date"></td></td> 

步驟2：Ajax調用找到可用日期（我使用WordPress所以URL是具體到WordPress）

AjaxGet = function() { 
    jQuery.ajax({ 
     type: "POST", 
     url: "/wp-admin/admin-ajax.php", 
     data: { 
      action: 'unavail_dates', 
      unavaildates: '2' 
     }, 
     success: function (output) { 
      dates = jQuery.parseJSON('["'+output+'"]'); 
      mySuccessCallback(dates); 
      console.log (dates); 
     } 
    }); 
}; 

第3步：mySuccessCallback（）函數從上面的代碼：

function mySuccessCallback(dates) { 
    array = dates 
    jQuery('#MyDate').datepicker({ 
     minDate: '+2', 
     maxDate: new Date(2014, 1,28), 
     dateFormat: 'dd-mm-yy', 
     beforeShowDay: function(date) { 
      var string = jQuery.datepicker.formatDate('yy/mm/dd', date); 
      return [ array.indexOf(string) == -1 ]; 
     }, 
     onSelect: function(dateText) { 
      jQuery(this).change(); 
     } 
    }).change(function() { 
     if (document.getElementById('date_error_row').style.visibility == 'visible') { 
      document.getElementById('date_error_row').style.visibility = 'hidden'; 
     } 
     var postid = '<?php echo esc_js($posted_id); ?>'; 
     var pdate = jQuery(this).val(); //Select updated value 

     jQuery.ajax({ 
      type:"POST", 
      url: "/wp-admin/admin-ajax.php", 
      data: {action: 'tempsave', postid: postid , postdate: pdate , status: 'waiting'}, 
      success:function(data){ 
       jQuery("#feedback").html(data); 
      } 
     }); 
     jQuery('#MyDate').datepicker('destroy'); 
    }); 
    jQuery('#MyDate').datepicker('show'); 
} 

Ste第4頁：

jQuery('#button').click(function() { 
    AjaxGet(); 
}); 

Answer 2

問題是你沒有返回從beforeShowDay方法的任意值。該方法不允許異步調用。

在你的情況，在beforeShowDay，您發送一個Ajax請求，然後該方法返回一個未定義的值，因此所有日期都將被視爲有效，然後Ajax請求完成並調用saveVariable方法，但它對beforeShowDay返回的值沒有任何影響。對於每一個達y在發送Ajax請求的日曆中。

建議的解決方案可以加載頁面加載時的所有不可用日期，並在beforeShowDay方法中使用該數據。

嘗試：

jQuery(document).ready(function ($) { 
    var dates; 
    $.ajax({ 
     type: "POST", 
     url: "/wp-admin/admin-ajax.php", 
     data: { 
      action: 'unavail_dates', 
      unavaildates: '2' 
     }, 
     success: function (data) { 
      dates = data; 
     } 
    }); 

    $('#MyDate').datepicker({ 
     minDate: '+2', 
     maxDate: new Date(2014, 1, 28), 
     dateFormat: 'dd-mm-yy', 
     beforeShowDay: function (date) { 
      var string = $.datepicker.formatDate('yy/mm/dd', date); 
      return [dates != undefined && $.inArray(string, dates) > -1]; 
     }, 
     onSelect: function (dateText) { 
      jQuery(this).change(); 
     } 
    }); 
});