在 JQuery DatePicker 上显示可用/启用天数的月份

Question

如何设置日历在下一个可用/启用日期显示月份？例如 如果今天的日期是 2017 年 12 月 1 日，DatePicker 将显示 12 月。但是，如果 12 月份没有可用/启用天数怎么办！ DatePicker 应改为显示 2018 年 1 月以及下一个可用/启用的日期。

以下代码用于禁用一周中的特定日期和一年中的特殊日期。

    const pad = x => x < 10 ? '0' + x : x
    const jQuery = { datepicker: { formatDate: (format, date) => `${pad(date.getMonth() + 1)}-${pad(date.getDate())}` }}

    function disableDays(date) {
        var day = date.getDate();
        var datestamp = jQuery.datepicker.formatDate('mm-dd', date)
        var specialDays = ["12-25", "01-01"]

        return (
             day !== 0
          && day !== 2
          && day !== 4
          && day !== 5
          && !specialDays.includes(datestamp)
        )
    }


$("#myid").datepicker({
    beforeShowDay: disableDays,
    minDate: 0, 
    dateFormat: 'dd-MM-yy',
    inline: true,
    showOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
})

Answer 1

首先，beforeShowDay 必须返回一个 数组 而不仅仅是简单的布尔值。忽略这一点，日历中的所有日期都将处于禁用状态。

Check the documentation for beforeShowDay here.

现在，对于原始问题显示下一个启用日期的月份，您可以使用beforeShow 选项，该选项接受一个函数，该函数返回带有datepicker 选项的对象以动态初始化与。

在此函数中，您可以将defaultDate 选项设置为下一个启用日期的对象返回。

这是一个演示：

$(function() {
  const pad = x => x < 10 ? '0' + x : x
  // jQuery.fn.datepicker.formatDate = (format, date) => { return `${pad(date.getMonth() + 1)}-${pad(date.getDate())}` };


  // flag to test by disabling december
  var enableDecember = true;

  function disableDays(date) {
    var day = date.getDate();
    var month = date.getMonth();
    var datestamp = jQuery.datepicker.formatDate('mm-dd', date);
    var specialDays = ["12-25", "01-01"];

    return [(
      // to test by disabling december
      (enableDecember || month !== 11) &&
      day !== 0 &&
      day !== 2 &&
      day !== 4 &&
      day !== 5 &&
      !specialDays.includes(datestamp)
    )];
  }

  function beforeSHOW(text, date) {
    var today = new Date();
    var count = 0;
    
    // looping dates to get to next enabled date
    while (true) {
      if (disableDays(today)[0] === true) {
        break;
      }
      count++;
      // next date in loop iteration
      today.setDate(today.getDate() + 1);
    }

    // set defaultDate, count is no of days from today,
    // so count 2 will be 2 days from now
    return {
      defaultDate: count
    };
  }

  $("#myid").datepicker({
    // add beforeShow handler
    beforeShow: beforeSHOW,
    beforeShowDay: disableDays,
    minDate: 0,
    dateFormat: 'dd-MM-yy',
    inline: true,
    showOtherMonths: true,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  });


  // test by toggling december month
  $('#toggle').on('click', function() {
    enableDecember = !enableDecember;
    var text = enableDecember ? 'disable December' : 'enable December';
    $(this).val(text);
    $("#myid").datepicker('refresh');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />






<input id="myid" type="text" />
<input id="toggle" type="button" value="disable December" />