Set HTML5 Date field Min value based on another HTML5 Date Value

user_7561981 0
Viewed 753

I am trying to set the minimum date of an HTML5 Date input based on the value set in another HTML5 Date Input.

So if you select the 3 April 2020 in the first date field, the min value of the second date input would be 3 April 2020.

I have tried using the value of the first date input, but this doesn't work. Any suggestions would be great.

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
document.getElementById("fDate").setAttribute("min", today);

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("fDate").setAttribute("min", minToDate);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="date" id="fDate" onBlur="myFunction()">
<input type="date" id="tDate">

date html jquery javascript
3 Answers

Change fdate to tdate

document.getElementById("fDate").setAttribute("min", minToDate);

to

document.getElementById("tDate").setAttribute("min", minToDate);


var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
  dd = '0' + dd
}

if (mm < 10) {
  mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
document.getElementById("fDate").setAttribute("min", today);

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("tDate").setAttribute("min", minToDate);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input type="date" id="fDate" onBlur="myFunction()">
<input type="date" id="tDate">

user_125409530

You want to set the mininum value to second datepicker, so you need to get that element:

function myFunction() {
  var minToDate = document.getElementById("fDate").value;
  document.getElementById("tDate").setAttribute("min", minToDate);
}
user_98627950

Your logic doesn't work because you're setting min on fDate, not tDate.

You should also avoid using inline onX event attributes as they are outdated and no longer good practice. Use unobtrusive event handlers instead. The logic can be simplified further as min accepts a Date object, so you don't need to hack around a Date object to form a string.

It's also worth noting that the min setting does not stop the user entering a date before that value. It's only used for validation when the form is submit, as you can see in the following example when the Submit button is clicked.

let fDate = document.querySelector('#fDate');
let tDate = document.querySelector('#tDate');

fDate.addEventListener('change', function() {
  tDate.min = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <input type="date" id="fDate" />
  <input type="date" id="tDate" />
  <button>Submit</button>
</form>

user_5194130
Related