DatePicker - 周五下午 3 点后，周一禁用

Question

我需要帮助来为 datePicker 添加规则。

对于当前规则，根据以下示例代码，第二天下午 3 点之后的任何一天（周末除外）都将被禁用。也在当天禁用。

但我的客户想在每个星期五下午 3 点之后添加另一条规则，而不是在第二天禁用，而他们希望在星期一禁用它。

根据下面的屏幕截图，我需要帮助。 5 月 1 日是星期五，在接下来的星期一应该禁用。

 //Date Picker
  var dateToday = new Date().getHours();
  $(function() {
    $( "#ContactDate" ).datepicker({
      //minDate: dateToday,
      minDate: dateToday >= 15 ? 2 : 1,
      dateFormat: 'dd-mm-yy',
      beforeShowDay: $.datepicker.noWeekends,
      maxDate: '+1m'
    });
  });

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

<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDate">

<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5de87425133808841c6e3b3e" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Answer 1

在您检查小时（您的变量 dateToday）的地方，您还可以检查 dayOfWeek 并将相应的偏移量添加到您的 minDate。

一周中的天数从 0 = 星期日开始，因此星期五 == 5。

以下是更新的代码，包括传入一个日期，以便在不同的日期/时间组合下轻松演示：

//Date Picker

function addDatePicker(selector, forDate) {

  var hours = forDate.getHours();
  var dow = forDate.getDay();
  var minDate = forDate.setDate(forDate.getDate() + (hours >= 15 ? 2 : 1) + (dow == 5 ? 2 : 0));

  $(selector).datepicker({
    minDate: forDate,
    dateFormat: 'dd-mm-yy',
    beforeShowDay: $.datepicker.noWeekends,
    maxDate: '+1m'
  });
}

addDatePicker("#ContactDateToday", new Date());
addDatePicker("#ContactDateWedAM", new Date(2020, 3, 29, 10));
addDatePicker("#ContactDateWedPM", new Date(2020, 3, 29, 18));
addDatePicker("#ContactDateFriAM", new Date(2020, 4, 1, 10));
addDatePicker("#ContactDateFriPM", new Date(2020, 4, 1, 18));

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

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> Today/Now:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateToday">
<hr/> Wed before 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateWedAM">
<hr/> Wed after 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateWedPM">
<hr/> Fri before 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateFriAM">
<hr/> Fri after 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateFriPM">