HTML5输入的“最小”属性不会使日历的过去日期变灰

问题描述

我知道这是一个相当普遍且重复的问题，但是我没有找到解决方案，也没有明确的原因来解决这个问题，我对如此简单但重要的事情感到沮丧。

我有一个form的{​​{1}}，其<input type=date />属性根据当前日期而变化。我有这个JS例程来确定当前日期，然后修改min

input type=date

当我检查Chrome浏览器的Elements Console时，我的let today = new Date(); let day = today.getDate(); let month = today.getMonth()+1; let year = today.getFullYear(); today = year + '-' + month + '-' + day; console.log(today) const calendarInput = document.getElementById('to-do-date'); calendarInput.min = today; 标签看起来像这样

input

很简单，对吧？

但是当我在表单上输入<input type="date" id="to-do-date" name="to-do-date" min="2020-8-31" required> <!-- That's date that I'm writing this--> 上的实际日期时，我得到了

Input's calendar not graying out previous dates

在图像中，您可以看到我的日历没有将我的form属性（即今天的min）之前的日期涂成灰色，即使我明确声明采用今天的日期和将其设置为2020-08-31属性，并且我使用了不同的验证方法来防止用户输入过去的日期，但无济于事。

如果你们知道其中的原因并与大家分享，我将不胜感激。

谢谢

解决方法

之所以会这样，是因为您需要使用“ yyyy-mm-dd ”格式，但是现在您使用的是“ yyyy-m-d ”格式。因此，您需要添加一个小功能，它将更正您的日期：

const correctDate = (date) => date < 10 ? '0' + date : date;

today = year + '-' + correctDate(month) + '-' + correctDate(day);

我希望这会对您有所帮助！

,

尝试使日期格式为YYYY-MM-DD 因此，将其改为2020-8-31

而不是2020-08-31