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" />
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With