jQuery UI Datepicker beforeShowDay 选项

在使用jQuery UI Datepicker时，可以利用beforeShowDay选项来自定义日期选择器中每个日期格子的显示。beforeShowDay选项返回一个函数，该函数用于判断每个日期格子是否可用，以及如何显示可用和不可用的日期格子。

语法

$(selector).datepicker({
  beforeShowDay: function(date) {
    // 在此处编写代码以返回一个数组，指定日期格子的显示方式
  }
});

在这里，selector是用于选取要绑定日期选择器的HTML元素的jQuery选择器字符串。beforeShowDay选项是一个包含一个函数的对象。该函数接受一个表示要显示的日期的Date对象，并返回一个数组。

数组中的第一个元素用于指定日期格子是否可用。如果这个值是true，那么日期格子是可用的；如果这个值是false，那么日期格子是不可用的。数组中的第二个元素用于指定日期格子的CSS类名。

返回值格式

beforeShowDay函数的返回值需要按以下格式返回：

[isSelectable, cssClass]

其中，isSelectable是一个布尔值，用于指定日期格子是否可用，CSSClass是一个字符串，表示在日期格子上应该应用的CSS类。

示例

以下示例在6月的第30天和7月的第1天之间创建禁用日期：

$(function() {
  $('#datepicker').datepicker({
    beforeShowDay: function(date) {
      var currentDate = (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
      if (currentDate == '6/30/2022' || currentDate == '7/1/2022') {
        return [false, '']
      } else {
        return [true, '']
      }
    }
  });
});

该示例中，如果当前日期是6月30日或7月1日，则beforeShowDay函数将返回[false, '']，表示这两个日期格子是不可用的。其余的日期格子将都是可用的，CSS类为空字符串。