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

时间:2015-09-23 17:52:18

标签: javascript jquery datepicker jquery-ui-datepicker

我见过使用onBeforeShowDay的解决方案,但这不是我需要的。我需要的是在更改月份或年份时我需要通过AJAX获取日期列表,然后使用该列表禁用当月的日期。

示例

$('#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'];
        }
    });
});

修改
谢谢你的解决方案。具体来说,我通过动态添加回调来使用动态方法。同样重要的是,AJAX调用需要async: false才能在数组上获得正确的数据集。

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

所以我只是按照答案加上:

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

再次,非常感谢!

1 个答案:

答案 0 :(得分:4)

您仍然可以使用onBeforeShowDay,因为它会在显示日期选择器之前被调用,因为更改月份会使日期选择器再次呈现。

您可以使用存储日期列表的数组,并根据您的ajax调用的结果更改此日期。例如

//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 ]
   }
});

这是工作fiddle