Saving Time With Epoch
Too often, as front end developers use Javascript to compare dates, validate dates, or otherwise manipulate dates, they take an approach much more complex that it needs to be. This is especially true of beginner and intermediate level Javascript code-heads.
To all those who find themselves writing lengthy functions and otherwise bogging down Javascript engines, I offer a phrase which will change your coding life (at least regarding dates): Epoch Time, which is the time 00:00:00 UTC on 1 January 1970.
“So what,” you ask?
Well, let’s examine a real world problem: You want a user to select a range of dates that generate a report. Due to system limitations, the first of these dates cannot be today, yesterday is the latest date you want to allow. Further, you want them to select an ending date for the report, but that date cannot be before the first date picked. Rather than show you the numerous wrong methods, here’s the ‘correct’ way to do this cleanly and efficiently. I use jQuery exclusively, so the example below relies on the sizzle engine and basic jQuery functions, readily translatable to legacy Javascript with some work. The below relies on the Date() object, so if you need a refresher, go look it up.
First, think about the steps:
1. Capture the dates entered
2. Convert those dates to Epoch time
3. Compare those dates
4. Determine error messaging
Sure, the below code can be shrunk further, but at the cost of readability. So, with the goal of helping you understand this process, the code -
// step one: capture the inputs from user, store in variables
startDate = $('.adminDateField:first').val();
endDate = $('.adminDateField:last').val();
currentDate = new Date();
/* step two: convert dates to epoch time (for this code snippet we assume the
date is in mm/dd/yyyy format)*/
//split the mm/dd/yyyy into an array of mm, dd, yyyy
var startDatePieces = new Array();
startDatePieces = startDate.split('/');
/*convert array elements to numbers; the split() function leaves the array
elements as strings*/
for (i=0;i<startDatePieces.length;i++) {
startDatePieces[i] = startDatePieces[i] * 1;
}
//create a date object for your start date
var theStartDate = new Date();
//set the date of the start date object
theStartDate.setFullYear(startDatePieces[2], startDatePieces[1], startDatePieces[0]);
//get the epoch time in milliseconds for your start date
var startDateEpochTime = theStartDate.getTime();
//we repeat the above process for the end date
var endDatePieces = new Array();
endDatePieces = startDate.split('/');
var theEndDate = new Date();
for (i=0;i<endDatePieces.length;i++) {
endDatePieces[i] = endDatePieces[i] * 1;
}
theEndDate.setFullYear(endDatePieces[2], endDatePieces[1], endDatePieces[0]);
var endDateTime = theEndDate.getTime();
//convert today's date to epoch time
var currentTime = currentDate.getTime();
// step three: Compare the dates
// AND
// step four: Write error messaging
if (currentTime < startDateTime) {
// some error message
alert('The date cannot be today or after today!');
} else if (endDateTime < startDateTime) {
// some error message
alert('The end date is before the start date!');
} else if (startDate == "mm/dd/yyyy" || endDate == "mm/dd/yyyy") {
// some error message
alert('Hey! Pick some dates!');
} else {
// It's all good
alert('Congratulations, you understand calendars as well as my first grade daughter!');
}
