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

Disable past dates in input type date and also in inner-spin arrows

本文关键字：日期 过去 旋转 类型 输入 内部      更新时间：2023-09-26

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

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

 //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;
 }

我认为这里的问题之一是"什么是最佳行为"，这成为了一种基于观点的理想。所以，如果你在今天之前将日期设置为明年，然后将年份更改为今年，其他部分应该怎么做？这是基于观点的部分，也是你想要操纵的"行为模式"。一旦失去焦点，您似乎需要手动操作日期。

复制上述内容的步骤示例：

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

根据您的设置，您现在设置了一个无效日期。一旦失去焦点，你需要检测到这一点，然后适当地处理日期有效性问题——你会把它设置回第一个（最短）日期吗？到下一个有效日期的年份？到下个月，那一天在哪里有效？你可以看到，这里的挑战是，这些可能都是你想要的行为，但那可能不是我想要的行为（我们都有不同的意见）。

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

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;
  }
});

此代码可以帮助您：

<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>
相关文章：