如何从 JavaScript 禁用输入 type="date" 的特定日期

Posted 2023-03-23

【中文标题】如何从 JavaScript 禁用输入 type="date" 的特定日期

【英文标题】：how can I disable particular date of input type="date" from JavaScript

【发布时间】：2017-10-31 09:50:52

【问题描述】：

我在我的 html 页面中输入了type="date"，我想通过 javascript 禁用特定日期。我该怎么做？

我尝试使用getElementById 禁用，但它会禁用完整的日期输入。

【问题讨论】：

您的意思是要阻止用户选择特定日期？

您想禁用特定日期或日期范围？？

***.com/a/17182584/1961144

javascriptisnotjava.io

【参考方案1】：

您可以在输入 type=date 中添加 min 或 max 属性。日期必须采用 ISO 格式 (yyyy-mm-dd)。尽管用户可以在不使用日期选择器的情况下手动输入无效日期，但许多移动浏览器和当前版本的 Chrome 都支持这一点。

<input name="somedate" type="date" min="2017-11-25">

min 和 max 属性必须是完整的日期；无法指定“今天”或“+0”。为此，您需要使用 JavaScript 或服务器端语言：

    var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);

然而，我们还不能做的是从我们的输入中消除天数。例如，我们不能仅仅通过标记来阻止选择周末或禁止周一。相反，我们需要做更多的工作，使用 HTML5 验证 API 和原生 JavaScript Date 对象。

如果所选日期是星期一，将显示错误的代码。

    var date = document.querySelector('[type=date]');

function noMondays(e)

    var day = new Date( e.target.value ).getUTCDay();

    // Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday

    if( day == 1 )

        e.target.setCustomValidity('OH NOES! We hate Mondays! Please pick any day but Monday.');

     else 

        e.target.setCustomValidity('');

    



date.addEventListener('input',noMondays);

【讨论】：

有没有办法突出显示任何特定日期？，不是整个输入，而只是突出一些日期..

使用 jquery ui datepicker

【参考方案2】：

您可以设置日期属性的最大值/最小值，如下所示：https://www.w3schools.com/tags/att_input_min.asp

但是，这不允许您禁用特定日期。如果你真的想要这个，我会检查是否允许在发布表格时选择日期。

您可以在 JQuery 中像这样在提交时获取选定的日期值：

 $('#submit').on('click', function()
      var date = new Date($('#date-input').val());

      day = date.getDate();
      month = date.getMonth() + 1;
      year = date.getFullYear();

      //Check here if date, month and year combination is allowed
 );

在本例中，我们有一个 ID 为“日期输入”的日期元素和一个 ID 为“提交”的按钮。

请注意，您还应该检查服务器端是否允许日期。