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

• javascript
• css
• date

Share Improve this question Follow edited Apr 6, 2016 at 13:56 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Mar 30, 2016 at 14:17 bashirudeen ahmadbashirudeen ahmad 21366 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

I think one of the issues is here is "What is the best behavior" which bees 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:

1. Set a date min/max: <input id="when" type="date" min="2016-04-06" max="2099-12-31" />
2. Change the year to 2017
3. Change the month and day both to 01 (January 1, 2017)
4. Change the year to 2016 using the spinner
5. Date shows as 01/01/2016

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>