禁用HTML5日期选择器中的特定日期

Question

在我使用时禁用日期是否可行？

我想为一个场景禁用当前日期，而对于另一个场景禁用未来的日期。 如何禁用这些日期？

- Seeya K

Answer 1

您可以在 input type=date 中添加 min 或 max 属性。日期必须符合 ISO 格式（yyyy-mm-dd）。这在许多移动浏览器和当前版本的 Chrome 中都得到支持，尽管用户可以手动输入无效日期而不使用日期选择器。

<input name="somedate" type="date" min="2013-12-25">

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

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

http://jsfiddle.net/mblase75/kz7d2/

排除今天，允许过去或未来的日期，这在这里不是一个选项。但是，如果你的意思是想让明天成为最小日期（清空今天和所有过去的日期），请参见此问题以将今天增加一天。

与所有涉及HTML表单的其他情况一样，无论如何限制客户端，您都应始终在服务器端验证字段。

- Blazemonger

---

@Pasta 是的，它可以。你在实现它时有具体的问题吗？ - Blazemonger

如果用户通过输入而不是日历插入日期，则此方法无效 :( - smartmouse

@smartmouse 这是正确的；需要一些JavaScript的onblur事件（除了服务器端验证）来处理这个问题。 - Blazemonger

谢谢，这个对我很有帮助。我正在使用Laravel和Livewire，因此根据我的业务逻辑，我正在像这样从livewire模块加载最小日期。 Carbon :: now（）->format（'Y-m-d'）; - Akash Sethi

你能用TimePickers做同样的事情吗？ - Web Developer

Answer 2

在纯 HTML 中，你可以通过 min 和 max 属性来限制日期的下限和上限。在下面的示例中，只有我发布这个问题的当周日期是允许的，其他日期会变灰，并且点击它们不会更新输入值：

<input type="date" min="2019-06-02" max="2019-06-08"/>

你也可以使用几行JavaScript来禁用任何无效的日期，但这不会包含所有原生的<input type="date">特性，比如变灰的日期。你可以在无效日期的情况下将日期值设置为''，并显示错误消息。以下是一个示例，它不接受周末日期：

// Everything except weekend days
const validate = dateString => {
  const day = (new Date(dateString)).getDay();
  if (day==0 || day==6) {
    return false;
  }
  return true;
}

// Sets the value to '' in case of an invalid date
document.querySelector('input').onchange = evt => {
  if (!validate(evt.target.value)) {
    evt.target.value = '';
  }
}

<input type="date"/>

- Nino Filiu

---

如果想要更改它，使得只有今天和明天不可选择，应该怎么做呢？谢谢。 - Anando

我认为这更具有灵活性，可以更好地进行样式和响应设计，特别是在使用Laravel时，所以给它加上+1。 - Satch

Answer 3

您可以使用以下方法禁用未来的日期：
在您的document.ready函数内，添加以下代码：

//Display Only Date till today //

var dtToday = new Date();
var month = dtToday.getMonth() + 1;     // getMonth() is zero-based
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
   month = '0' + month.toString();
if(day < 10)
   day = '0' + day.toString();

var maxDate = year + '-' + month + '-' + day;
$('#dateID').attr('max', maxDate);

并以表单形式呈现

<input id="dateID" type="date"/>

这里有一个可工作的 jFiddle演示。

- Sreejith BS

Answer 4

HTML日期选择器（<input type=date>）支持min/max属性。现在得到广泛支持。

参考资料：

W3C规范

- leesei

---

你所说的“不被广泛支持”的链接显示全球支持率为96.29%。 - reformed

Answer 5

根据您的需求，您还可以使用step属性来仅启用特定日期 - 例如每个星期一或隔一天。您可以与min和max结合使用。

例如：每个星期一

<input type="date" step="7" value="2022-04-04">

每个星期四。

<input type="date" step="7" value="2022-04-07">

每隔一天

<input type="date" step="2">

- divillysausages

Answer 6

对于React和类似的库，你可以使用以下代码禁用所有今天之前的日期。

<input type='date' min={new Date().toISOString().split('T')[0]}>

- Mujahidul Islam