javascript dates - long dates - short dates - timezones

Managing Dates with Javascript Date Formats

Javascript date formats are notoriously quirky — they are a critical part of many websites, but they’re difficult to implement correctly in a cross-browser fashion — and have caused developers many headaches. The Javascript standard provides three different formats for Javascript dates, and each format has different uses.

Some variations in Javascript dates happen simply because of the browser you use, especially when adding a specific time. Developers need to be aware that the same code handling a date can work differently on different browsers. This is less of a problem in modern browsers but some irregularities still remain.

This article will go over the various types of Javascript date formats and why Javascript has a preferred format for both dates and times. Then, we will examine the quirks that browsers present when working with these formats.

Javascript Date Format Types

The three Javascript date format types are ISO (International Organization for Standardization) dates, short dates, and long dates. By default, Javascript uses ISO dates internally.

ISO Dates

ISO dates use the ISO 8601 standard to specify dates and times in a variety of ways. Javascript uses this by default because it is a well-defined, precise, and consistent standard.

The ISO 8601 standard defines the parts of dates as follows:

  • MM — month from 01 to 12
  • MMM — month abbreviation from Jan. to Dec.
  • DD — day from 01 to last day of the month (various)
  • YYYY — year as a 4-digit number

The ISO 8601 standard defines the parts of times as follows:

  • T — separation character between date and time
  • HH — hours from 00 to 23
  • MM — minutes from 00 to 59
  • SS — seconds from 00 to 59
  • Z — indicates Coordinated Universal Time (UTC)
  • +HH:MM — replaces “Z” if offsetting UTC to another time zone later than UTC
  • -HH:MM — replaces “Z” if offsetting UTC to another time zone earlier than UTC

The preferred Javascript date formats are:

  • Dates Only — YYYY-MM-DD
  • Dates With Times — YYYY-MM-DDTHH:MM:SSZ

The following examples show the different ISO date and time formats that Javascript supports.

let completeDate = new Date("2021-01-01");
let yearMonth = new Date("2021-01");
let yearOnly = new Date("2021");
let dateTimeUTC = new Date("2021-01-01T12:00:00Z");
let dateTimeEST = new Date("2021-01-01T12:00:00-04:00");

The variables dateTimeUTC and dateTimeEST refer to time zones; respectively Coordinated Universal Time and Eastern Standard Time. Location-appropriate presentation to the user is as important as ensuring time issues remain consistent for all users, regardless of location.

Short Dates

Short dates are a format most Americans write every day: MM/DD/YYYY. However, this format may be less familiar to international audiences; please see the “Quirky Behaviors of Javascript Date Format Types” section for details.

let shortDate = new Date("01/12/2021");

Long Dates

Long dates use the abbreviation of a month rather than its number. The month and day can be in either of the first to positions — “MMM DD YYYY” or “DD MMM YYYY” — so both of these two formats are acceptable. However, this format may cause confusion for international audiences; please see the “Quirky Behaviors of Javascript Date Format Types” section for details.

You can write months’ full names or abbreviate them in long dates. Long dates ignore commas and are case-insensitive.

// These long dates are equivalent.
let longDate1 = new Date("Jan 01 2021");
let longDates = new Date("01 Jan 2021");
let longDate3 = new Date("January 01 2021");
let longDate4 = new Date("JAN 01, 2021");

Quirky Behaviors of Javascript Date Format Types

We’ve already covered some of the quirkiness of Javascript date formats in previous blogs. When converting from Javascript to JSON and back using JSON.parse() and JSON.stringify(), for example, developers must create special functions to handle Javascript dates because the built-in functions can’t do it themselves. These special functions often include try catch statements to handle errors or invalid dates, and can be tricky to implement.

Months or Days Without Leading Zeros

In some browsers, specifying a date without leading zeros on months or days may cause an error in the “YYYY-MM-DD” format. The following examples should be equivalent, but only the first one is guaranteed not to create an error.

// These three dates should be equivalent, but are NOT.
let leading1 = new Date("2021-01-01");  // OK
let leading2 = new Date("2021-1-01");   // Possible month error
let leading3 = new Date("2021-01-1");   // Possible day error

Undefined Date Formats

Always specify dates with their components in the recommended order. Switching months, days, and years around may cause unexpected errors. The following examples illustrate common problems with undefined date formats, assuming a date of November 24, 2021.

The date format “YYYY/MM/DD” (with forward-slashes as delimiter) is undefined. Some browsers will try to read the format, and may throw an error if they cannot, and others will return NaN (not a number). Always specify short dates in the “MM/DD/YYYY” format.

let short1 = new Date("11/24/2021");  // Correct
let short2 = new Date("2021/11/24");  // Possible read, error, or NaN

When specifying ISO dates, the format MM-DD-YYYY is undefined. Like the previous format, some browsers will try to read it, and they might throw an error or return NaN. Always specify ISO dates in the “YYYY-MM-DD” format.

let iso1 = new Date("2021-11-24");  // Correct
let iso2 = new Date("11-24-2021");  // Possible read, error, or NaN

Time Zone Variations

Javascript’s computed dates are relative to the time zone of the computer that is running the program. This means that dates can sometimes vary even if they are specified correctly.

// This date may compute to December 31, 2020 or January 1, 2021.
let tz1 = new Date("2021-01-01");

Always specify full dates and times with the proper format to avoid this problem. Don’t forget to add the “T” date/time separator and to use “Z” or “+/-HH:MM” when specifying full dates and times, or your program may still be vulnerable to these variations.

Specifying Dates for International Audiences

Always use ISO dates when specifying dates for international audiences. The standard formats of short dates could cause confusion for international audiences, as could the presence of undefined date formats.

For example, the short date format “YYYY/MM/DD” is common internationally, but it is undefined in Javascript, as mentioned earlier. Similarly, the common short date format “MM-DD-YYYY” is undefined in Javascript, but is common in the United States. Since long dates can specify the month or day first, people from different countries could also interpret the dates differently.

// ISO standard date for April 8, 2021
let iso = new Date("2021-04-08");

// Short dates, written as a US or international speaker would
let shortUSA = new Date("04-08-2021");  // Error
let shortInt = new Date("2021/04/08");  // Error

Conclusion

Javascript date formats seem simple, but handling them properly between browsers and choosing the right format can be surprisingly complicated. Even backed by a robust international standard, variation between browsers can cause unexpected results.

Enroll in our Introduction to Programming Nanodegree course today to learn more about Javascript date formats and other coding fundamentals to build your abilities and confidence in programming concepts.

Start Learning

Jessica Reuter Castrogiovanni
Jessica Reuter Castrogiovanni