Using JavaScript to validate date inputs to account for leap year

Question

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

I have 3 fields:

Year - <input ...>
Month - <select>
Day - <input ...>

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

Given 2012 / February - Valid input would be 1 through 29 for days
Given 2013 / Februrary - Valid input would be 1 through 28 for days

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

Change the `min` & `max` of `day` input in the `onchange` event of the `select` box based on the month. But I am not sure about ie7 and 8. — Zee, May 13 '15 at 05:57
max for input: ie7 ie8 ie9 are not supported http://www.w3schools.com/tags/att_input_max.asp :( — Som, May 13 '15 at 06:30
why not use a select box for the days too, then you can hide days 29 to 31 on change of the month drop down — Pete, May 13 '15 at 08:28
Can you show any code of what you have tried? or you could try using HTML5shiv or ie7.js to make min max work in ie7+ ([see this post](http://stackoverflow.com/questions/5667076/modernizr-html5shiv-ie7-js-and-css3-pie-which-to-use-and-when)) — Pete, May 13 '15 at 10:51
or use the number polyfill (whatever that is) http://html5please.com/#number — Pete, May 13 '15 at 11:00
I modified the post to be easier to read and comprehend as well as cleaned up unnecessary tags. — VulgarBinary, May 14 '15 at 04:23
@Som Why not use the HTML5 date input? There are plenty of polyfills available. — Brad, May 14 '15 at 04:28
Some companies won't let you use polyfills unfortunately. I can understand his pain as having worked in the past for said barbaric organizations. — VulgarBinary, May 14 '15 at 04:42

score 2 · Accepted Answer · edited May 23 '17 at 12:23

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>

Salman A · Answer 2 · 2015-05-14T12:43:49.747

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">

Using JavaScript to validate date inputs to account for leap year

2 Answers2