Libby Hemphill research and posts on social media, collaboration, and related technologies

JavaScript date checking

Sometimes we ask users to enter a date range. I wrote some code today to check whether the date a user entered was (1) after today and (2) before some other date she entered. In my situation, I was building a flight search form and wanted to check that the user-entered departure date was before the user-entered return date and that the user wasn't trying to depart in the past. To do this, I needed to turn the user's input into a JavaScript Date and then compare that Date to Today's date. I found a lot of similar code online, but none of it work quite right.

I have a form with text box inputs for dateDepart and dateReturn. This code takes those inputs, turns them in JavaScript dates, compares them to each other and to today, and returns alerts or submits the form, depending on how the comparisons shake out.

Here's my code:

// check to make sure Return date is after Departure date, and both are after today
if ( (the_form.dateDepart.value !="") && (the_form.dateReturn.value !="") )
{
	var strFromDate = the_form.dateDepart.value;
	var dayPartFromDate = parseInt(strFromDate.substring(3,5),10);
	var monPartFromDate = parseInt(strFromDate.substring(0,2),10);
	var yearPartFromDate = parseInt(strFromDate.substring(6,10),10);
	var dtDepart = new Date(yearPartFromDate, monPartFromDate-1, dayPartFromDate);

	var strToDate = the_form.dateReturn.value;
	var dayPartToDate = parseInt(strToDate.substring(3,5),10);
	var monPartToDate = parseInt(strToDate.substring(0,2),10);
	var yearPartToDate = parseInt(strToDate.substring(6,10),10);
	var dtReturn = new Date(yearPartToDate, monPartToDate-1, dayPartToDate);
	var now = new Date();
	var today = new Date(now.getFullYear(),now.getMonth(),now.getDate());	

	if(dtDepart > dtReturn)
	{
		alert('Departure date must be before return date. Please fix and resubmit.');
		return false;
	}
	else if (dtDepart < today)
	{
		alert('Departure date must be after today. Please fix and resubmit.');
		return false;
	}
	else
	{
		the_form.submit();
	}
}

Turn User Input into a JavaScript Date
To turn the user's input into a Date, I needed to parse the input and then pass the pieces to the Date() function.

The JavaScript substr function syntax I used corresponds to dateToChange.substring(start,finish). My users are mostly in the U.S., and they enter dates in the form MM/DD/YYYY, e.g., 03/14/2009. JavaScript starts counting at 0, so the substr functions above grab "14" for the day, "03" for the month, and "2009" for the year and then pass those substrings to the Date()function to be converted in a Date JavaScript understands.

getFullYear(); returns a four-digit year such as "2009" that makes it easy to compare to the default version of today's date that
var now = new Date();
var today = new Date(now.getFullYear(),now.getMonth(),now.getDate());
gives.

Why monPartToDate-1? Remember, JavaScript starts counting at 0, so January is month 0, and December is month 11. That means I need to subtract 1 from what my user entered to get the right month for JavaScript.

Compare Dates
I needed to compare the two dates the user entered to make sure she had departure first, then return. Once I have converted both her inputs to JavaScript dates, the comparison uses a simple "greater than" operator: dtDepart > dtReturn

Calling the Date-checking Function
You'll notice my code doesn't include a function declaration; that's because this date-checking procedure is part of a larger function to validate my form. You could wrap this code in a function declaration such as
function checkDates(the_form){}

In order to call the code when the user submits the form, I like to use something like

<input id="search" onclick="checkDates(this.form);" type="button" value="Submit Form" />

in the HTML.