在输入类型日期和内部旋转箭头中禁用过去的日期

Question

我使用以下脚本禁用了过去的日期。 但是我无法在内旋箭头中禁用过去的日期。

许多搜索结果显示仅隐藏内旋箭头; 我不想隐藏内旋箭头。 是否可以在内旋箭头中禁用过去的日期？

 //disable past dates
 var today = new Date().toISOString().split('T')[0];
 document.getElementsByName("dateField")[0].setAttribute('min', today);

 //hide inner-spin arrows
 input[type=number]::-webkit-inner-spin-button, 
 input[type=number]::-webkit-outer-spin-button { 
 -webkit-appearance: none; margin:0;
 }

Answer 1

我认为其中一个问题是“什么是最好的行为”，它成为一种基于意见的理想。 那么，如果您将日期设置为今天之前的下一年，那么将年份更改为今年，其他部分应该怎样做？ 这是基于意见的部分和您希望操纵的“行为模式”。 看来， 一旦焦点丢失 ，您需要手动操作日期 。

复制上述步骤的示例：

1. 设置日期最小/最大： <input id="when" type="date" min="2016-04-06" max="2099-12-31" />
2. 将年份更改为2017年
3. 将月份和日期都更改为01（2017年1月1日）
4. 使用微调器将年份更改为2016
5. 日期显示为01/01/2016

您现在，根据您的设置设置了无效日期。 失去焦点后，您需要检测到这一点，然后适当地管理该日期有效性问题 - 您会将其设置回第一个（最小）日期吗？ 到下一年有那个作为有效日期？ 到那一天有效的下一个月？ 你看到这里的挑战是任何这些可能是你想要的行为，但这可能不是我想要的行为（我们都有不同的意见）。

编辑：在输入事件触发器上设置为您的最小值：

var inputMyDate = document.querySelector('input#when');

inputMyDate.addEventListener('input', function() {
  var current = this.value;
  var min = input.getAttribute("min");
  if (new Date(current) < new Date(min)) {
    var setmin = new Date(min).toISOString().split('T')[0];
    this.value = setmin;
  }
});

Answer 2

此代码可以帮助您：

<form action="demo_form.asp">
 Enter a date before 1980-01-01:
 <input type="date" name="bday" max="1979-12-31"><br>

 Enter a date after 2000-01-01:
 <input type="date" name="bday" min="2016-12-25"><br>

 Quantity (between 1 and 5):
 <input type="number" name="quantity" min="1" max="5"><br>

<input type="submit">
</form>