'HTML input type date set min-max Value Not Working For Typing in Form

I am using HTML5 input date like below :

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2020-03-01" max="2021-03-31">

The date limit work if user click on datepicker icon, but not if user typing in the form.

May be we can check the limit using jquery? But not yet try that. I will try to work it in jsfiddle, here the link : https://jsfiddle.net/TheCuteCat/rcxjmse1/

htmljquerydate


Solution 1:[1]

I would do something like:

//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q;
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
// tiny library above - magic below
const date = I('date'), minDate = new Date('3/1/2020'), millisecondOverMaxDate = new Date('4/1/2020');
date.onchange = function(){
  const a = this.value.split('-'), s = a.shift(), d = new Date(a.join('/')+'/'+s), t = d.getTime();
  console.clear(); // remove consoles on deployment
  if(t >= minDate && t < millisecondOverMaxDate){
    console.log('within range');
  }
  else{
    console.log('out of range');
  }
}
}); // end load
/* css/external.css */
*{
  box-sizing:border-box; color:#000; padding:0; margin:0; overflow:hidden;
}
html,body,.main{
  width:100%; height:100%;
}
.main{
  background:#333; overflow-y:auto;
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <input id='date' type='date' value='2018-07-22' min='2020-03-01' max='2021-03-31' />  
  </div>
</body>
</html>

Solution 2:[2]

Here you go.

$(function() {
 
 $("#datepicker").datepicker({ dateFormat: 'mm/dd/yy', minDate: '10/10/18', maxDate: '03/05/19' }).datepicker("setDate", '12/25/18');

 
});
div.ui-datepicker{
 font-size:10px;
}
<label>Date:</label>
<input type="text" id="datepicker">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"
  integrity="sha256-UOoxwEUqhp5BSFFwqzyo2Qp4JLmYYPTHB8l+1yhZij8="
  crossorigin="anonymous"></script>

JSFIDDLE DEMO because it works better.

Solution 3:[3]

I worked on this problem and I found focusout function to be the best solution that match my requirement. It may help you if you have a similar requirement. Jquery code:

$("#datefield").focusout(function(){
            date = $("#datefield").val();
            if(date>"2021-06-30" || date<"2020-07-01"){
                alert("Please enter a valid date.");
                $("#datefield").val("");
            }
 });

Solution 4:[4]

You can handle it from JavaScript.

function validateDate(event) {
  const { name, value } = event.target;
  const minDate = new Date('2020-03-01T00:00');
  const maxDate = new Date('2021-03-31T00:00');
  const inputDate = new Date(value+'T00:00');

  // Limit the min and max dates users can input
  const isValid = !isNaN(inputDate);
  if (isValid && inputDate >= minDate && inputDate <= maxDate) {
    return value;
  }
}

Add this to the date input's onChange and store the return in a variable that is used as the input's value.

The one downside is that this solution kinda messes with the user's ability to type in years after they've already typed in a month and day.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 StackSlave
Solution 2 norcal johnny
Solution 3 Abhishek
Solution 4 Akaisteph7

Related Questions