I am setting the minimum date in html5 date input, but I can still select a date prior to minimum date using date up/down arrow.

For example I have set the min date to 2018-02-22 but once I have selected the month or date using down arrow a date prior to min date is getting selected.

Can I restrict it using any HTML date property

Setting min date and selecting it

Able to select previous date & getting date in the console

document.getElementById('button').addEventListener('click', function() {
  var x = document.getElementById('date').value;
  console.log(x);
})

<input type="date" min="2018-02-22" id="date">
<button type="button" id="button">Get Date</button>

I am setting the minimum date in html5 date input, but I can still select a date prior to minimum date using date up/down arrow.

For example I have set the min date to 2018-02-22 but once I have selected the month or date using down arrow a date prior to min date is getting selected.

Can I restrict it using any HTML date property

Setting min date and selecting it

Able to select previous date & getting date in the console

document.getElementById('button').addEventListener('click', function() {
  var x = document.getElementById('date').value;
  console.log(x);
})

<input type="date" min="2018-02-22" id="date">
<button type="button" id="button">Get Date</button>

• javascript
• html

Share Improve this question Follow edited Feb 22, 2018 at 6:11 brk asked Feb 22, 2018 at 5:34 brkbrk 50.4k1010 gold badges5959 silver badges8484 bronze badges 7

• Which browser are you using? Could be that browser doesn't correctly enforce min/max date. – Nicholas Hirras Commented Feb 22, 2018 at 5:40
• I am using Chrome Version 64.0.3282.119 (32-bit) – brk Commented Feb 22, 2018 at 5:42
• Seems like every browser implements this differently. I checked on Edge browser, and I do not see any up/down arrows there. So you can either hide the up/down arrows using CSS or explicitly use Javascript to prevent changing the date value below minimum. – CapeAndCowl Commented Feb 22, 2018 at 5:46
• @CapeAndCowl Yes every browser has their native handling for input type date – Kiran Shinde Commented Feb 22, 2018 at 5:48
• 1 Browsers don't really implement the min/max restrictions well on the textbox, if at all. If you want something that prevents the text from being changed to something invalid you should probably look at a date picker control library. – Herohtar Commented Feb 22, 2018 at 5:52

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 2

For this (I can still select a date prior to minimum date using date up/down arrow)to happen you should set max date also, as shown below

<input type="date" min="2018-02-22" id="date" max="2018-02-28"> 

Seems like the browser only enforces min and max if you try to submit the value.

If you use min and max to restrict the available dates (see Setting maximum and minimum dates), supporting browsers will display an error if you try to submit a date that is outside the set bounds. However, you'll have to check the results to be sure the value is within these dates, since they're only enforced if the date picker is fully supported on the user's device.

But you can easily validate the value using JavaScript:

document.getElementById('button').addEventListener('click', function() {
  var x = document.getElementById('date').value;
  console.log(x);
});
document.getElementById('date').addEventListener('change', function () {
  if (this.value < this.min) this.value = this.min;
});

<input type="date" min="2018-02-22" id="date" required>
<button type="button" id="button">Get Date</button>