CODEWITHSUNDEEP
javascriptvalidationdate
Som
Som

Reputation: 270

Using JavaScript to validate date inputs to account for leap year

I tried searching for the solution in existing stackoverflow answers but I was not finding a suitable answer.

I have 3 fields:

My question is involving leap years. If the user selects February I need to restrict the day input based on whether or not the provided year is a leap year.

Example

Unfortunately I have to support this in all modern browsers as well as IE7 and IE8.

Upvotes: 3

Views: 2128

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272246

Construct a date object based on the input year, month and date. JavaScript corrects invalid dates so compare the resulting year, month and date with the user input. 

function check_date(year, month, date) {
  var y = Number(year);
  var m = Number(month);
  var d = Number(date);
  var date = new Date(y, m - 1, d);
  return (
    date.getFullYear() === y &&
    date.getMonth() === m - 1 &&
    date.getDate() === d
  );
}
document.getElementById("validate").onclick = function() {
  alert(check_date(
    document.getElementById("year").value,
    document.getElementById("month").value,
    document.getElementById("date").value
  ));
}
input,
select {
  width: 8em;
}
<input id="year" placeholder="Year">
<select id="month">
  <option value="">Month</option>
  <option value="1">Jan</option>
  <option value="2">Feb</option>
  <option value="3">Mar</option>
  <option value="4">Apr</option>
  <option value="5">May</option>
  <option value="6">Jun</option>
  <option value="7">Jul</option>
  <option value="8">Aug</option>
  <option value="9">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>
<input id="date" placeholder="date">
<input id="validate" type="button" value="Check date">

Upvotes: 1

VulgarBinary
VulgarBinary

Reputation: 3589

Logic from: Determine if a year is a leap year

Below is how it's applied to a simple form, snippet demonstrates.

I only wired validity for Feb, try it out and let me know if you have any questions.

function isLeapYear(yr)
{
  return ((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0);
}

window.onload = function(){
  document.getElementById("validate").onclick = function(){
    var output = document.getElementById("isValid");
    var year = document.getElementById("year");
    var month = document.getElementById("month");
    var day = document.getElementById("day");
   
    var yearVal = parseInt(year.value);
    var monthVal = parseInt(month.options[month.selectedIndex].value);
    var dayVal = parseInt(day.value);
    console.log(monthVal + "/" + dayVal + "/" + yearVal);
    if(monthVal === 2){
      if(isLeapYear(yearVal)){
           output.innerHTML = dayVal >= 1 && dayVal <= 29 ? "Yes" : "No";
      }else{
         output.innerHTML = dayVal >= 1 && dayVal <= 28 ? "Yes" : "No";
      }
    }
  };
};
<input type="text" id="year" value="2012" />
<select id="month">
  <option value="1">Jan</option>
  <option value="2" selected=selected>Feb</option>
  <option value="3">Mar</option>
  <option value="12">...etc...</option>
</select>
<input type="text" id="day" value="29" />
<br />
<button id="validate">Validate</button>
<p>
  IsValid: <span id="isValid"></span>
</p>

Upvotes: 2

Related Questions