在日期选择器中将假期变灰的简单方法？答案

【问题标题】：Simple way to grey out holidays in datepicker?在日期选择器中将假期变灰的简单方法？
【发布时间】：2021-07-16 15:39:13
【问题描述】：

我需要灰显或至少突出显示假期。有没有办法解决这个问题？

这是我的代码。有人有什么想法吗？

$(document).ready(function () {
            $('#DatePickerStart').datepicker({
                beforeShowDay:
                    $.datepicker.noWeekends, dateFormat: 'dd.mm.yy', minDate: '-2', firstDay: 1
            }, $.datepicker.regional["de"]).val();

            $('#DatePickerEnd').datepicker({
                beforeShowDay:
                    $.datepicker.noWeekends, dateFormat: 'dd.mm.yy', minDate: '0', firstDay: 1
            }, $.datepicker.regional["de"]).val();
        });

【问题讨论】：

我不太确定是否有办法禁用所有这些。但是你可以制作一个你想要禁用的日期数组（或者更好的是一个易于修改的配置文件，因为它们可能每年都会改变）并一个一个地禁用它们。也许这可能会有所帮助：stackoverflow.com/questions/9742289/…
@Eden 你测试解决方案了吗
@Frenchy 我还没有测试它，因为我的同事显然已经找到了另一种方法，但非常感谢你的解决方案。我会尽可能地测试它。
所以请不要忘记验证答案以关闭问题

标签： javascript jquery date datepicker

【解决方案1】：

正如 Landenne 所说，您可以使用数组：

和返回函数

return [true, 'holiday', 'tooltip1';  //enable
return [false, 'holiday', 'tooltip1'; //disable

如果为真，您可以添加 css holiday 和工具提示

  .ui-datepicker td.holiday a, .ui-datepicker td.holiday a:hover {
    background: grey;
    border: 1px solid red;
  }

如果为 false，则禁用日期

$(document).ready(function() {

  var holiDays = [ //YYYY,MM,DD
    [2021, 04, 01, 'test one date'], 
    [2021, 04, 14, 'test range', 2021, 04, 30],
    [2021, 12, 25, 'Christmas Day'],
    [2021, 07, 01, 'long holidays', 2021, 08, 31]
  ];
  
  holiDays = wrapDate(holiDays);

  $("#DatePickerStart").datepicker({
    beforeShowDay: setHoliDays
  });

  // set holidays function which is configured in beforeShowDay
  function setHoliDays(date) {
    let dt = wrapDate(date);
    for (i = 0; i < holiDays.length; i++) {

      if (dt >= holiDays[i][0] && dt <= holiDays[i][1]) {

        return [true, 'holiday', holiDays[i][2]];
      }
    }
    return [true, ''];
  }

  function wrapDate(date) {
    if ($.isArray(date)) {// is holidays array?
      let ar = [];
      for (let i = 0; i < date.length; i++) {
        if (date[i].length < 5) { //only one date
          let ymd = date[i][0] * 10000 + date[i][1] * 100 + date[i][2];
          ar.push([ymd, ymd, date[i][3]]);
        } else { // range date
          let ymd1 = date[i][0] * 10000 + date[i][1] * 100 + date[i][2];
          let ymd2 = date[i][4] * 10000 + date[i][5] * 100 + date[i][6];
          ar.push([ymd1, ymd2, date[i][3]]);
        }
      }
      return ar;
    }
    // else format date to YYYYMMDD
    return date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
  }

});

.ui-datepicker .weekend .ui-state-default {
  background: #FEA;
}

.ui-datepicker-calendar {
  width: 100%;
}

.ui-datepicker-calendar>td>a {
  position: relative;
  padding-bottom: 20px;
}

.ui-datepicker td.holiday a, .ui-datepicker td.holiday a:hover {
  background: grey;
  border: 1px solid red;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<div class="Calendar" id="DatePickerStart">
</div>

【讨论】：