Select only specific dates in jQuery UI datepicker (date list comes from AJAX)

• Initialize the datapicker only once; tell it to fetch valid dates from a global array
• Initialize the global array using array literal, update it via AJAX whenever necessary
• Call the .datepicker("refresh") method whenever disabled/enabled dates change — i.e. when you get new results through AJAX
• Your code does not add leading zeros to the dates hence $.inArray won’t work as expected

---

var datelist = []; // initialize empty array

$("#datepicker").datepicker({
    beforeShowDay: function(d) {
        // normalize the date for searching in array
        var dmy = "";
        dmy += ("00" + d.getDate()).slice(-2) + "-";
        dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "-";
        dmy += d.getFullYear();
        return [$.inArray(dmy, datelist) >= 0 ? true : false, ""];
    }
});

$("#button").click(function() {
    datelist = []; // empty the array
    $.post("/echo/html/", {
        // parameters here
    }, function() {
        var result = "28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012,28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012"; // dummy result
        datelist = result.split(","); // populate the array
        $("#datepicker").datepicker("refresh"); // tell datepicker that it needs to draw itself again
    });

Demo here