如何在jQuery UI Datepicker中禁用周一并阻止用户手动输入日期

禁用周一选项 #

jQuery UI Datepicker 中date.getDay()的返回值规则为：0对应周日，1对应周一，2对应周二，依此类推至6对应周六。你只需修改beforeShowDay回调中的判断逻辑，新增周一的禁用规则即可：
修改前的beforeShowDay逻辑：

beforeShowDay: function(date) {
  var day = date.getDay();
  return [(day == 0 ? false : disableSpecificDate(date)), ''];
}

修改后的beforeShowDay逻辑：

beforeShowDay: function(date) {
  var day = date.getDay();
  // 新增day == 1的判断，禁用周一
  return [(day == 0 || day == 1 ? false : disableSpecificDate(date)), ''];
}

阻止用户手动输入日期 #

无需额外编写JS逻辑，直接给日期输入框添加readonly属性即可，用户将无法编辑输入框内容，只能通过日期选择器弹窗选择有效日期：
修改前的输入框代码：

<input id="date" type="text" name="attributes[DELIVERY DATE]" value="" />

修改后的输入框代码：

<input id="date" type="text" name="attributes[DELIVERY DATE]" value="" readonly />

完整可运行代码 #

JS 代码 #

if (window.jQuery) {
  let $ = window.jQuery;

  $(function() {
    // Dates to exclude
    var excludeDays = ['2021-09-04', '2021-09-12'];

    function disableSpecificDate(date) {
      // To disable specific day
      var dateArr = [String(date.getFullYear()), String(date.getMonth() + 1), String(date.getDate())];
      if (dateArr[1].length == 1) dateArr[1] = "0" + dateArr[1];
      if (dateArr[2].length == 1) dateArr[2] = "0" + dateArr[2];
      return excludeDays.indexOf(dateArr.join("-")) == -1;
    }
    $("#date").datepicker({
      dateFormat: 'dd/mm/yy',
      minDate: +1,
      maxDate: '+1M',
      beforeShow: function() {
        // To exclude next business day after 12 PM
        if (new Date().getHours() >= 12) {
          $(this).datepicker("option", "minDate", +2);
        }
      },
      beforeShowDay: function(date) {
        var day = date.getDay();
        // 同时禁用周日和周一
        return [(day == 0 || day == 1 ? false : disableSpecificDate(date)), ''];
      }
    });
  });
}

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></script>

<div style="width:300px; clear:both;">
  <p>
    <!-- 新增readonly属性禁止手动输入 -->
    <input id="date" type="text" name="attributes[DELIVERY DATE]" value="" readonly />
    <span style="display:block" class="instructions"></span>
  </p>
</div>

内容的提问来源于stack exchange，提问作者Lauren