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

user_10351316 0
Viewed 5873

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/

date html jquery
4 Answers

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>

user_24384230

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.

user_61923320

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("");
            }
 });
user_163038780

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.

user_82858110
Related