如何在onChangeMonthYear之后禁用jQuery UI Datepicker中的日期

Question

I've seen solutions using the onBeforeShowDay but that is not what I need. What I need is when changing the either Month or Year I need to get a list of dates via AJAX and then use that list to disable the days in the current month.

Example

$('#date_input').datepicker( "option", "onChangeMonthYear", function(year,month,inst) {
    // Perform AJAX call and get the list
    $.ajax({
        url: ajaxUrl,
        type: "post",
        data: serializedData,
        async: false,
        success: function (data) {
            // Here is where I want to update the display
            // and use the returned data as the basis for the disabled list
            // of the current month.
            // Let's say:
            // data = ['2015-10-15','2015-10-25','2015-10-13'];
        }
    });
});

EDIT
Thanks for the solution. To be specific, I was using the dynamic approach by adding the callback dynamically. Also it is important that AJAX call need to have async: false in order to get the correct data set on the array.

$('#date_input').datepicker( "option", "onChangeMonthYear", function(year,month,inst) {
    // The ajax call.    
});

So I just followed the answer and added:

$('#date_input').datepicker( "option", "beforeShowDay", function(date) {
    // Update the list.    
});

Again, much thanks!

Answer 1

you can still use the onBeforeShowDay , since it will get called before the datepicker is displayed, because changing months will make the datepicker to render again.

You can use an array that stores the list of dates and change this based on the result from your ajax call. eg

//at first only september dates will be disabled.
var array = ["2015-09-23","2015-09-24","2013-09-16"];

$('input').datepicker({
    onChangeMonthYear: function(year, month, inst) {
    // Perform AJAX call and get the list
    //override the array, and now the october dates will be disabled.
        $.ajax({
          url: ajaxUrl,
          type: "post",
          data: serializedData,
          async: false,
          success: function (data) {
              array = data; //["2015-10-23","2015-10-24","2013-10-16"];
           }
        });  
   },
   beforeShowDay: function (date) {
     var string = jQuery.datepicker.formatDate('yyyy-mm-dd', date);
     return [array.indexOf(string) == -1 ]
   }
});

here is the working fiddle