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选项，该选项接受返回带有{{1}选项的对象的函数用。动态初始化。

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

这是一个演示：

＆＃13;

defaultDate

＆＃13;

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

＆＃13;

在可用/启用日期的JQuery DatePicker上显示月份

1 个答案: