3rd March 2014

A recent project I was working on required me to build a custom dynamic calendar in Javascript using a dataset from MySQL. All was working fine as I built it using my browser of choice, Google Chrome, but once it came to testing in other browsers everything came crashing down as soon as I tried it using Internet Explorer. The problem I had run into was creating my Date objects directly using the MySQL date format of YYYY-mm-dd in the following way:

new Date('2014-02-10');

After a bit of testing I discovered that all modern browsers can accept and parse this date format but IE9 and below don't understand it and return an Invalid Date. This got me wondering what date formats do different browsers understand and which ones are valid in all browsers so I wrote a script to test Date objects created using different combinations of date strings and these are the results.

The Test Jump straight to the results!

A date was picked at random to test against which was Friday, 9th August 2013 and each date format would then be tested against this date constructed as new Date(2013, 7, 9) which I know to be a correct and valid Date object in all browsers.

A list of date formats to test against was generated by selecting from a list of date, month and year formats and combining them together using a separator. There were 2 date formats, 4 month formats, 2 year formats and 4 separators which gave a total of 384 different date format combinations. The following is a list of each format that was used (all are notated in PHP date() format):

  • Date
    • d - date number with leading zeros - 09
    • j - date number without leading zeros - 9
  • Month
    • m - month number with leading zeros - 08
    • n - month number without leading zeros - 8
    • F - full month name - August
    • M - short month name - Aug
  • Year
    • Y - full year number - 2013
    • y - short year number - 13
  • Separators
    • / [forward slash]
    • - [hyphen]
    • [space]
    • [no separator]

With the data in place, the test plan was devised and a rough outline and code sample can be seen below:

  1. Create a date using a contructor known to be valid in all browsers
  2. Loop through each date format string we want to test
  3. Create a new Date object using the current date format string
  4. Compare this date with the valid date

// create a date we know to be valid
var validDate = new Date(2013, 7, 9);

// array of all date formats to test
var dateFormats = [...];

for (var i=0; i<dateFormats.length; i++) {

	// create date from the current format
	var testDate = new Date(dateFormats[i]);

	// compare with valid date
	if (
		validDate.getFullYear() === testDate.getFullYear() &&
		validDate.getMonth() === testDate.getMonth() &&
		validDate.getDate() === testDate.getDate()
	) {
		// date is valid and correct
	}
	else {
		if (isNaN(testDate.getTime()) {
			// date is not valid
		}
		else {
			// date is valid but not correct
		}
	}
}

If you would like to contribute to the test or just run it in your browser and see the results you can do so. Results are anonymously collected and if I get data from other browsers or operating systems not already in the test I will add them to the results.

Run the Test in Your Browser Now

The Results

All Browsers

The results from all the test browsers were compiled and a total of 40 date formats were found to be valid in all browsers. These formats can be used safely in all browsers with consistent results:

  • [Full Year]/[Month]/[Date number] - Month can be either the number with or without a leading zero or the month name in short or long format, and date number can be with or without a leading zero.
    Examples:
    • 2013/08/09
    • 2013/08/9
    • 2013/8/09
    • 2013/8/9
    • 2013/August/09
    • 2013/August/9
    • 2013/Aug/09
    • 2013/Aug/9
  • [Month]/[Full Year]/[Date Number] - Month can be either the number with or without a leading zero or the month name in short or long format, and date number can be with or without a leading zero.
    Examples:
    • 08/2013/09
    • 08/2013/9
    • 8/2013/09
    • 8/2013/9
    • August/2013/09
    • August/2013/9
    • Aug/2013/09
    • Aug/2013/9
  • Any combination of [Full Year], [Month Name] and [Date Number] separated by spaces - Month name can be in either short or long format, and date number can be with or without a leading zero.
    Examples:
    • 2013 August 09
    • August 2013 09
    • 09 August 2013
    • 2013 Aug 09
    • Aug 9 2013
    • 2013 9 Aug
    • etc...

Modern Browsers

Additionally, another date format was found to be valid in all modern browsers (using the Google supported browser guidelines a modern browser is the current and previous major release versions):

  • [Full Year]-[Month Number]-[Date Number] - Month and Date Number must include leading zeros (this is the format that the MySQL Date type uses)
    Example:
    • 2013-08-09

A number of other formats were found to be valid in specific browsers so when just targetting a specific vendor the number of options increase dramatically. For example, there are 156 valid date formats when just targetting Chrome and 65 when targetting Firefox.

Full Test Results

The results table shows all results from the test in all browsers and operating systems. Use the select menu to filter which results are displayed and hover over the date formats to display the actual date string used.

384 Total Results

Chrome logo ChromeFirefox logo FirefoxInterner Explorer logo Interner ExplorerOpera logo Opera
Windows logoWindows logoWindows logoWindows logo
date format333.6276789101112.1520
Y/m/d
Y-m-d
Y m d
Ymd
Y/m/j
Y-m-j
Y m j
Ymj
Y/M/d
Y-M-d
Y M d
YMd
Y/M/j
Y-M-j
Y M j
YMj
Y/F/d
Y-F-d
Y F d
YFd
Y/F/j
Y-F-j
Y F j
YFj
Y/n/d
Y-n-d
Y n d
Ynd
Y/n/j
Y-n-j
Y n j
Ynj
y/m/d
y-m-d
y m d
ymd
y/m/j
y-m-j
y m j
ymj
y/M/d
y-M-d
y M d
yMd
y/M/j
y-M-j
y M j
yMj
y/F/d
y-F-d
y F d
yFd
y/F/j
y-F-j
y F j
yFj
y/n/d
y-n-d
y n d
ynd
y/n/j
y-n-j
y n j
ynj
Y/d/m
Y-d-m
Y d m
Ydm
Y/d/M
Y-d-M
Y d M
YdM
Y/d/F
Y-d-F
Y d F
YdF
Y/d/n
Y-d-n
Y d n
Ydn
Y/j/m
Y-j-m
Y j m
Yjm
Y/j/M
Y-j-M
Y j M
YjM
Y/j/F
Y-j-F
Y j F
YjF
Y/j/n
Y-j-n
Y j n
Yjn
y/d/m
y-d-m
y d m
ydm
y/d/M
y-d-M
y d M
ydM
y/d/F
y-d-F
y d F
ydF
y/d/n
y-d-n
y d n
ydn
y/j/m
y-j-m
y j m
yjm
y/j/M
y-j-M
y j M
yjM
y/j/F
y-j-F
y j F
yjF
y/j/n
y-j-n
y j n
yjn
m/Y/d
m-Y-d
m Y d
mYd
m/Y/j
m-Y-j
m Y j
mYj
m/y/d
m-y-d
m y d
myd
m/y/j
m-y-j
m y j
myj
M/Y/d
M-Y-d
M Y d
MYd
M/Y/j
M-Y-j
M Y j
MYj
M/y/d
M-y-d
M y d
Myd
M/y/j
M-y-j
M y j
Myj
F/Y/d
F-Y-d
F Y d
FYd
F/Y/j
F-Y-j
F Y j
FYj
F/y/d
F-y-d
F y d
Fyd
F/y/j
F-y-j
F y j
Fyj
n/Y/d
n-Y-d
n Y d
nYd
n/Y/j
n-Y-j
n Y j
nYj
n/y/d
n-y-d
n y d
nyd
n/y/j
n-y-j
n y j
nyj
m/d/Y
m-d-Y
m d Y
mdY
m/d/y
m-d-y
m d y
mdy
m/j/Y
m-j-Y
m j Y
mjY
m/j/y
m-j-y
m j y
mjy
M/d/Y
M-d-Y
M d Y
MdY
M/d/y
M-d-y
M d y
Mdy
M/j/Y
M-j-Y
M j Y
MjY
M/j/y
M-j-y
M j y
Mjy
F/d/Y
F-d-Y
F d Y
FdY
F/d/y
F-d-y
F d y
Fdy
F/j/Y
F-j-Y
F j Y
FjY
F/j/y
F-j-y
F j y
Fjy
n/d/Y
n-d-Y
n d Y
ndY
n/d/y
n-d-y
n d y
ndy
n/j/Y
n-j-Y
n j Y
njY
n/j/y
n-j-y
n j y
njy
d/Y/m
d-Y-m
d Y m
dYm
d/Y/M
d-Y-M
d Y M
dYM
d/Y/F
d-Y-F
d Y F
dYF
d/Y/n
d-Y-n
d Y n
dYn
d/y/m
d-y-m
d y m
dym
d/y/M
d-y-M
d y M
dyM
d/y/F
d-y-F
d y F
dyF
d/y/n
d-y-n
d y n
dyn
j/Y/m
j-Y-m
j Y m
jYm
j/Y/M
j-Y-M
j Y M
jYM
j/Y/F
j-Y-F
j Y F
jYF
j/Y/n
j-Y-n
j Y n
jYn
j/y/m
j-y-m
j y m
jym
j/y/M
j-y-M
j y M
jyM
j/y/F
j-y-F
j y F
jyF
j/y/n
j-y-n
j y n
jyn
d/m/Y
d-m-Y
d m Y
dmY
d/m/y
d-m-y
d m y
dmy
d/M/Y
d-M-Y
d M Y
dMY
d/M/y
d-M-y
d M y
dMy
d/F/Y
d-F-Y
d F Y
dFY
d/F/y
d-F-y
d F y
dFy
d/n/Y
d-n-Y
d n Y
dnY
d/n/y
d-n-y
d n y
dny
j/m/Y
j-m-Y
j m Y
jmY
j/m/y
j-m-y
j m y
jmy
j/M/Y
j-M-Y
j M Y
jMY
j/M/y
j-M-y
j M y
jMy
j/F/Y
j-F-Y
j F Y
jFY
j/F/y
j-F-y
j F y
jFy
j/n/Y
j-n-Y
j n Y
jnY
j/n/y
j-n-y
j n y
jny


Join in the Discussion

comments powered by Disqus