如何为 type='datetime-local' 的 Input 设置最小值和最大值？

Posted 2023-03-30

【中文标题】如何为 type=\'datetime-local\' 的 Input 设置最小值和最大值？

【英文标题】：How to I set min and max value for Input with type='datetime-local'?如何为 type='datetime-local' 的 Input 设置最小值和最大值？

【发布时间】：2017-06-16 09:03:47

【问题描述】：

已解决

嗨，我有一个输入字段，它应该向 mysql 发送一个值，我想设置最大值和最小值来预测用户可以选择的日期范围。

这个输入是一个本地日期时间字段，因为我希望他也选择时间。

我知道如何设置日期，但不能让它工作。也许我错过了什么？

这是我的fiddle

  <label>This is datetime-local</label>

<input type='datetime-local' min='2017-06-14 00:00:00' max='2017-06-16 00:00:00'>

  <label>This is date</label>

<input type='date' name="date" min="2017-06-14" max="2017-06-16">

【问题讨论】：

好的，我想我错过了日期和时间之间的 T。如何在我的 mysql 查询中得到这个？

我明白了。我在我的选择之间简单地使用了一个 T 。 DATE_FORMAT(date_arrival, "%Y-%m-%dT%H:%i")

【参考方案1】：

最小值和最大值示例

<input
    type="datetime-local"
    className="form-control mt-2"
    name="start_date"
    min="2011-02-20T20:20"
    max="2031-02-20T20:20"
/>

【参考方案2】：

尽管声明了 here，但我还是让它增加了秒数，比如 yyyy-MM-ddThh:mm:ss

<input type="datetime-local" id="start-date" min="2021-06-07T14:47:57" />

我需要最小输入是“今天”，所以使用 JS：

let dateInput = document.getElementById("start-date");
dateInput.min = new Date().toISOString().split(".")[0];

那么日历不会让你超过那个最小日期。您可以为 max 属性应用相同的代码。

【讨论】：

很好的调整/破解来找到日期时间！