如何在HTML输入日期

Question

我在html5日期输入中设置了最小日期，但我仍然可以使用日期上/下箭头选择最小日期之前的日期。

例如，我已将最小日期设置为2018-02-22，但是一旦我使用向下箭头选择月份或日期，就会选择最小日期之前的日期。

我可以使用任何HTML日期属性

来限制它

设置最短日期并选择

能够选择上一个日期＆amp;在控制台中获取日期

document.getElementById('button').addEventListener('click', function() {
  var x = document.getElementById('date').value;
  console.log(x);
})

<input type="date" min="2018-02-22" id="date">
<button type="button" id="button">Get Date</button>

Answer 1

如果您尝试提交值，浏览器似乎只会强制执行最小值和最大值。

  

如果使用min和max来限制可用日期（请参阅设置   最大和最小日期），支持浏览器将显示错误   如果您尝试提交超出设定范围的日期。然而，   你必须检查结果，以确保价值在这些范围内   日期，因为它们只有在日期选择器完全执行时才会强制执行   在用户的设备上支持。

但您可以使用JavaScript轻松验证该值：

document.getElementById('button').addEventListener('click', function() {
  var x = document.getElementById('date').value;
  console.log(x);
});
document.getElementById('date').addEventListener('change', function () {
  if (this.value < this.min) this.value = this.min;
});

<input type="date" min="2018-02-22" id="date" required>
<button type="button" id="button">Get Date</button>

Answer 2

为此（我仍然可以使用日期上/下箭头选择最小日期之前的日期），您还应该设置最大日期，如下所示

<input type="date" min="2018-02-22" id="date" max="2018-02-28">