HTML5 输入的 "min" 属性未使日历的过去日期变灰

Question

我知道这是一个相当普遍和重复的问题，但我还没有找到解决方案，也没有明确说明为什么会发生这种情况，我对如此简单但重要的事情感到沮丧。

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

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;

当我检查 Chrome 的 Elements 控制台时，我的 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-->

很简单，对吧？

但是当我在我的 form 上输入实际日期的表格时，我得到了这个

Input's calendar not graying out previous dates

在图片中，您可以看到我的日历没有将 min 属性之前的日期显示为灰色，今天是 2020-08-31，即使我明确表示要采用今天的日期日期并将其作为 min 属性，我使用了不同的验证方法来防止用户输入过去的日期但无济于事。

如果你们知道这背后的原因并分享，我将不胜感激。

谢谢

Answer 1

发生这种情况是因为您需要具有“yyyy-mm-dd”格式，但现在您具有“yyyy-m-d" 格式。所以你需要添加一个小功能，它会更正你的日期：

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

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

希望对您有所帮助！

Answer 2

尽量使日期格式为 YYYY-MM-DD 所以不是 2020-8-31 而是 2020-08-31

HTML5 输入的 "min" 属性未使日历的过去日期变灰

HTML5 input's "min" attribute is not graying out calendar's past dates

html

attributes

date

input

min