JQuery datepicker：禁用日期显式启用答案

【问题标题】：JQuery datepicker: Disable dates explicitly enabledJQuery datepicker：禁用日期显式启用
【发布时间】：2020-10-27 20:14:33
【问题描述】：

我有一个筛选可选日期的日期选择器。要求只有 T、W、Th 和每月一个随机星期六。到目前为止，我已经能够使用下面的代码完成此操作。现在，我的客户希望能够出于各种原因（例如假期、办公室关闭等）阻止 T、W、Th 的某些日子。我不确定如何完成这个新请求。有什么想法吗？

var SaturdayDate = ["7-25-2020", "8-15-2020" ];

$(function() {

  $("#my_date_picker").datepicker({
    beforeShowDay: function(dt) {
      return [dt.getDay() == 2 || dt.getDay() == 3 || dt.getDay() == 4 || enableThisDay(dt), ""];
    },
    minDate: 1
  });
});
            
function enableThisDay(date) {
  var oDate = $.datepicker.formatDate('m-d-yy', date);
  if ($.inArray(oDate, SaturdayDate) != -1) {
    return [true];
  }
}

【问题讨论】：

var oDate = $.datepicker.formatDate('m-d-yy', date); 中的日期格式似乎与 SaturdayDate 变量中的格式不匹配。你检查过吗？格式应为m-dd-yyyy
周六功能正常。我需要禁用 T、W、Th 上的特定日期，所有这些日子都已明确启用。

标签： javascript jquery datepicker

【解决方案1】：

Datepicker 接受需要禁用的日期数组。

您应该能够通过以下方式禁用日期：

var dates = ["20/07/2020", "21/07/2020", "22/07/2020", "23/07/2020"];

function disableDates(date) {
  var string = jQuery.datepicker.formatDate('dd/mm/yy', date);

  let isDefaultDisabled = false;
  if(date.getDay()===2 || date.getDay()==3 || date.getDay()==4){
    isDefaultDisabled = true;
  }

  return [ isDefaultDisabled && dates.indexOf(string) == -1 ];
}


$(function() {
     $("#date").datepicker({
         beforeShowDay: disableDates
     });
});

这是一个工作示例：https://jsfiddle.net/idhruvs/wdkprbsL/9/

【讨论】：

感谢 Dhruv。我见过这种方法，它可以自己工作，但是在ShaowDay之前添加到其他参数时，它没有任何影响。因此，例如，如果我如下添加 DisableDates 函数，它就不起作用。 beforeShowDay:function(dt) { return [dt.getDay()==2 || dt.getDay()==3 || dt.getDay()==4||enableThisDay(dt) || DisableDates(dt), "" ];}, minDate:0
我认为最好将检查日期是否需要禁用的整个逻辑移至 disbaleDates 函数。这使我们能够更好地控制我们的逻辑。我已经更新了我的答案。
您可以参考我的答案中包含的小提琴。日期21/7/2020、22/7/2020 和23/7/2020 对应于T, W, TH，但由于它们在dates 数组中被提及，因此它们被禁用。
我的答案中的 JSFiddle 链接是根据我的答案更新的。它应该可以正常工作
太棒了。谢谢，谢谢，谢谢Dhruv！

【解决方案2】：

我会保留任何数组以使用Date 对象而不是字符串，从而消除了潜在问题的格式化。我有两个数组：“随机”星期六和节假日。然后我会有一个函数来检查日期是否启用。

// Dates in JS use 0 indexed months, so 6 is July and 7 is August
var saturdays = [ new Date(2020, 6, 25), new Date(2020, 7, 15) ];
var holidays = [ new Date(2020, 6, 22), new Date(2020, 6, 2), new Date(2020, 7, 13) ];

$(function() {
  $("#my_date_picker").datepicker({
    beforeShowDay: enableThisDay,
    minDate: 1
  });
});

function enableThisDay(date) {
  var enabled = false;
  // if it's Tue, Wed, Thu, enable it
  if ([2,3,4].includes(date.getDay())) {
    enabled = true;
  }
  // if it's a holiday, disable it
  if (holidays.some(h => h.valueOf() === date.valueOf())) {
    enabled = false;
  }
  // if it's a saturday, disable it
  // note that if it's a saturday, that overrides holiday
  // if holidays override saturday, swap this statement with 
  // the one immediately above
  if (saturdays.some(s => s.valueOf() === date.valueOf())) {
    enabled = true;
  }
  return [enabled, ""];
}

<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>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylehseet">
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylehseet">
<input type="text" id="my_date_picker">

【讨论】：