Working with Date and Date Format in Javascript

On January 5, 2016, in Other Online Technology, by James Liu

Several days ago, one of my friend ask me for help. He wrote a piece of Javascript code, which will select two day’s date from the Calendar, then show both of them in a certain format. There is one extra task, calculate the number of days between two selected dates.

The problem he met was that all functions worked properly in Chrome. But when he run this Javascript in Safari, he always got NaN when he used new Date(dateString) to create Date object. Furthermore, this script was working perfectly several days ago.

How to Solve new Date() Returns NaN Problem

After several hours debuging, I finally find out the problem is caused by the date string which is used to create Date object. First, let me show you his original Javascript source code:

	var getDateString = function(numberOfDays) {
		var dateObj = new Date();
		dateObj.setDate(dateObj.getDate() + numberOfDays);
		var YYYY = dateObj.getFullYear();
		var MM = dateObj.getMonth()+1;
		var DD = dateObj.getDate();
		return YYYY + "-" + MM + "-" + DD;
	};

The above Javascript source code will return a date string, like “2015-12-25”. Everything works well till the date becomes “2016-1-1” (January 1, 2016). This is the funny part. The date string “2015-12-25” is a valid date format, but “2016-1-1” doesn’t. The correct date for “January 1, 2016” is “2016-01-01”. Here is the date format definition in EcmaScript 5:

ECMAScript defines a string interchange format for date-times based upon a simplification of the ISO 8601 Extended Format. The format is as follows: YYYY-MM-DDTHH:mm:ss.sssZ

YYYY is the decimal digits of the year 0000 to 9999 in the Gregorian calendar.
– “-” (hyphen) appears literally twice in the string.
MM is the month of the year from 01 (January) to 12 (December).
DD is the day of the month from 01 to 31.

The date only forms are considered as valid date format as well. For information, you can check this: Date Time String Format in EcmaScript 5

Correct Way to Get IOS Date Format in Javascript

Now, we know that my friend’s javascript has some problems. Sometimes, it doesn’t return correct date format (according to EcmaScript definition). Once, we correct the problem. The right Javascript source code will work properly in all browsers like IE, Chrome, Safari, including iPhone Safari. Here is the right way to get date format which can be recognized in all browsers.

	var getDateString = function(numberOfDays) {
		var dateObj = new Date();
		dateObj.setDate(dateObj.getDate() + numberOfDays);
		var YYYY = dateObj.getFullYear() + '';
		var MM = (dateObj.getMonth() + 1) + '';
		MM = (MM.length === 1) ? '0' + MM : MM;
		var DD = dateObj.getDate() + '';
		DD = (DD.length === 1) ? '0' + DD : DD;
		return YYYY + "-" + MM + "-" + DD;
	};

Get Number of Days Between Two Given Dates

After we solve the problem which is caused by date format, we can easily get the number of days between two dates by Javascript.

	var getNumberOfDays = function(dateStr1, dateStr2) {
		var dateObj1 = new Date(dateStr1);
		var dateObj2 = new Date(dateStr2);
		return parseInt(Math.abs(dateObj1 - dateObj2) / 1000 / 60 / 60 / 24);
	};
Tagged with:  

Leave a Reply

Premium WordPress Themes

Free WordPress Theme