如何在月份更改後在UI日期選擇器中啓用日期？

原題鏈接：所有的Help! How to make days enabled in UI datepicker after month change?如何在月份更改後在UI日期選擇器中啓用日期？

首先，尼克Craver的解決方案是美好的。但我得到了另外一個問題：

尼克Craver日期來源是來自於JS變量xml，但我的約會源來自一個XML文件。所以我得到了相同的日期結果，但日期選擇器沒有按照我的方式顯示。

尼克Craver代碼：

var xml = '<?xml version="1.0" encoding="utf-8"?><users><user id="126"><name>john</name><watchHistory><whMonthRecords month="2010-10"><whDateList month="2010-10"><date>01</date><date>05</date><date>21</date></whDateList></whMonthRecords><whMonthRecords month="2010-11"><whDateList month="2010-11"><date>01</date><date>05</date><date>06</date><date>07</date><date>08</date><date>09</date><date>12</date><date>13</date><date>14</date><date>16</date><date>18</date><date>19</date><date>21</date><date>22</date><date>23</date><date>24</date><date>25</date><date>26</date><date>29</date></whDateList></whMonthRecords></watchHistory></user></users>'; 

var daysWithRecords = []; 

function getDays(year,month){ 
    initDaysArray($(xml) , year , month); 
}

我希望它是：沒有工作]

var daysWithRecords = []; 

function getDays(year,month){ 
$.ajax({ 
    type: "GET", 
    url: "users.xml", 
    dataType: "xml", 
    success:function(data){ 
       initDaysArray($(data) , year , month); 
      } 
    });

功能initDaysArray()：

function initDaysArray($xml , year , month){ 
var dateToFind = year+'-'+month; 

daysWithRecords = $xml.find('user[id="126"] whDateList[month="'+dateToFind+'"] date').map(function() { 
    return dateToFind +"-"+ $(this).text(); 
    }).get(); 

for(i = 0; i < daysWithRecords.length; i++){ 
     console.log(daysWithRecords[i]); 
} 
}

我通過Firebug的測試。這似乎被調用的函數中的順序：

first call: getDays() // being called from onChangeMonthYear 
second call: checkAvailability() // being called from beforeShowDay 
third call: ajax inside getDays() // being called inside getDays() 
final call: initDaysArray() // being called inside ajax success of getDays()

如此，initDaysArray[]總是空內checkAvailability()

[我的解決方法]

我發現這種方式來弄清楚：

使用datepicker's method "refresh"在ajax讀取XML文件後重繪日期選取器

function getDays(year,month,inst){ 

    $.ajax({ 
     type: "GET", 
     url: "users.xml", 
     dataType: "xml", 
     cache: false, 
     success:function(data){ 

      console.log('reading xml file success!'); 
      initDaysArray($(data) , year , month); 

      //inst.id get the div which attached with datepicker and redraw 
      $('#'+inst.id).datepicker('refresh'); 
      console.log(inst.id); 

     } 

    });

來源

2010-11-14 qinHaiXiang

它是否正確地獲取XML？如果您在成功回調中添加了「警告（數據）」行，它是否顯示完全相同的字符串？ – 2010-11-14 02:20:27

Yeah.I用console.log（）調試firebug，它顯示從xml文件返回的日期。 – qinHaiXiang 2010-11-14 03:05:28

的問題是，AJAX是異步 - 這意味着當XML文件被加載腳本的其餘部分將被運行。您需要使用ajax來獲取XML文件，在頁面加載完成後或啓用日期選擇器時。

這意味着您應該將您的ajax代碼放在Nick Craver編寫的所有內容之外，因爲除非加載XML文件，否則它們將無法工作。

$.ajax({ 
    type: "GET", 
    url: "users.xml", 
    dataType: "xml", 
    success: function(xml) { 
     // All of Nick Craver's code here, 
     // including the initialisation code for the datepicker 
    } 
});

您應該在加載XML文件之前顯示加載指示符，以向用戶指示控件尚未準備好。

來源

2010-11-14 05:55:39

非常感謝！我會稍後再嘗試！ – qinHaiXiang 2010-11-14 08:32:23

如何在月份更改後在UI日期選擇器中啓用日期？

回答

相關問題