在 HTML 5 输入类型日期上禁用周末

是否可以禁用 HTML 5 输入类型日期的所有周末？

 <input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />

原文由 kaplievabell 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 652

仅对于 HTML 5 输入类型日期，这是不可能的。

您可以使用 flatpickr 作为替代方案：( https://chmln.github.io/flatpickr/examples/#disabling-specific-dates )

它看起来更好，也可以满足您的要求！

在文档中提到了一个名为 disable 的属性，您可以使用它来删除周末。

 {
"disable": [
    function(date) {
        return (date.getDay() === 0 || date.getDay() === 6);
    }
],
"locale": {
    "firstDayOfWeek": 1 // start week on Monday
}

}

完整的工作示例：

 $("#date1").flatpickr({
    enableTime: true,
    dateFormat: "m-d-Y",
    "disable": [
        function(date) {
           return (date.getDay() === 0 || date.getDay() === 6);  // disable weekends
        }
    ],
    "locale": {
        "firstDayOfWeek": 1 // set start day of week to Monday
    }
});

 <html>
  <head>
    <title>Using Flatpickr</title>
  <!--  Flatpicker Styles  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
  </head>
  <body>
      <input id="date1"  placeholder="MM/DD/YYYY" data-input />
        <!-- jQuery -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <!--  Flatpickr  -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>
  </body>
</html>

原文由 Jbadminton 发布，翻译遵循 CC BY-SA 4.0 许可协议

const picker = document.getElementById('date1'); picker.addEventListener('input', function(e){ var day = new Date(this.value).getUTCDay(); if([6,0].includes(day)){ e.preventDefault(); this.value = ''; alert('Weekends not allowed'); } });

在 HTML 5 输入类型日期上禁用周末

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

Stack Overflow 翻译