[英]Disable past dates in input type date and also in inner-spin arrows
I have disabled the past dates using the below script. 我使用以下脚本禁用了过去的日期。 But I'm unable to disable the past dates in inner-spin arrows.
但是我无法在内旋箭头中禁用过去的日期。
Many search results show to hide the inner-spin arrows only; 许多搜索结果显示仅隐藏内旋箭头; I don't want to hide the inner-spin arrows.
我不想隐藏内旋箭头。 Is it possible to disable the past dates in inner-spin arrows?
是否可以在内旋箭头中禁用过去的日期?
//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;
}
I think one of the issues is here is "What is the best behavior" which becomes an opinion based ideal. 我认为其中一个问题是“什么是最好的行为”,它成为一种基于意见的理想。 SO, if you set the date to NEXT year prior to today, then change the YEAR to this year, what should the OTHER parts do?
那么,如果您将日期设置为今天之前的下一年,那么将年份更改为今年,其他部分应该怎样做? THAT is the opinion based part and the "behavior pattern" that you wish to manipulate.
这是基于意见的部分和您希望操纵的“行为模式”。 It appears that then you would need to manually manipulate the date once focus is lost .
看来, 一旦焦点丢失 ,您需要手动操作日期 。
Example of steps to replicate the above: 复制上述步骤的示例:
<input id="when" type="date" min="2016-04-06" max="2099-12-31" />
<input id="when" type="date" min="2016-04-06" max="2099-12-31" />
You now, according to your settings have set an invalid date. 您现在,根据您的设置设置了无效日期。 Upon loosing focus you will need to detect this then manage that date validity issue appropriately - would you set it back to the first (minimum) date?
失去焦点后,您需要检测到这一点,然后适当地管理该日期有效性问题 - 您会将其设置回第一个(最小)日期吗? To the next YEAR that has that as a valid date?
到下一年有那个作为有效日期? To the next MONTH where that day would be valid?
到那一天有效的下一个月? You see the challenge here is that any of these may be YOUR desired behavior but that might not be MY desired behavior (we both have differing opinions).
你看到这里的挑战是任何这些可能是你想要的行为,但这可能不是我想要的行为(我们都有不同的意见)。
EDIT: set to YOUR minimum on input event trigger: 编辑:在输入事件触发器上设置为您的最小值:
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;
}
});
This code can help you : 此代码可以帮助您:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.