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

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

复制上述步骤的示例：

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

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

2 个答案: