JavaScript Date Formats

❮ Previous Next ❯

JavaScript Date Input

JavaScript typically supports three kinds of date input formats:

Type	Example
ISO Date	2015-03-25 (The International Standard)
Short Date	03/25/2015
Long Date	Mar 25 2015 or 25 Mar 2015

The ISO format adheres to a strict standard in JavaScript.

The other formats may vary and could depend on the browser used.

JavaScript ISO Dates

ISO 8601 is a worldwide rule for showing dates and times.

The ISO 8601 format, which looks like Year-Month-Day, is the preferred way to write dates in JavaScript.

The calculated date will match your time zone.
Based on your time zone, the date you see above could be either March 24 or March 25.

ISO Dates (Year and Month)

ISO dates can be written without specifying the day (YYYY-MM):

Time zones will vary the result above between February 28 and March 01.

ISO Dates (Only Year)

You can write ISO dates with just the year (YYYY).

The result above may change depending on the time zone between December 31, 2014, and January 1, 2015.

ISO Dates (Date-Time)

ISO dates are a way to write dates and times. They include the year, month, day, and also the hours, minutes, and seconds. The format looks like this: YYYY-MM-DDTHH:MM:SSZ.

In date and time formats, a capital "T" is used to separate the date and time.

UTC time is indicated by a capital "Z".

If you want to modify the time relative to UTC, remove the Z and add +HH:MM or -HH:MM instead:

UTC (Universal Time Coordinated) is the same as GMT (Greenwich Mean Time).

If you leave out "T" or "Z" in a date-time string, it may lead to inconsistent results across different browsers.

Time Zones

If you don't tell JavaScript the time zone when you set a date, it will simply use the time zone of your web browser.

When you request a date without mentioning the time zone, the result will be adjusted to match the time zone of the user's web browser.

Put simply, if you create a date or time in Greenwich Mean Time (GMT) and someone from the central United States views it, it will automatically change to Central US Daylight Time (CDT) to match their time zone.

JavaScript Short Dates.

Dates in a short format are typically shown in the MM/DD/YYYY style, such as this:

WARNINGS !

In some browsers, months or days with no leading zeroes may produce an error:

const d = new Date("2015-3-25");

The behavior of "YYYY/MM/DD" is undefined.
Some browsers will try to guess the format. Some will return NaN.

const d = new Date("2015/03/25");

The behavior of "DD-MM-YYYY" is also undefined.
Some browsers will try to guess the format. Some will return NaN.

const d = new Date("25-03-2015");

JavaScript Long Dates.

Usually, long dates are written in the format MMM DD YYYY, for example:

Month and day can be in any order:

You can write the month in two ways: the full name (e.g., January) or a shorter abbreviation (e.g., Jan).

Commas are ignored. Names are case insensitive:

Date Input - Parsing Dates

If you have a proper date, you can change it into milliseconds using the Date.parse() method. This helps you work with time in a digital format.

The Date.parse() function gives us the count of milliseconds between a particular date and January 1, 1970.

Afterward, you can utilize the number of milliseconds to transform it into a date object.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript ISO Dates</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("2015-03-25");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript ISO Dates</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("2015-03");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript ISO Dates</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("2015");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript ISO Dates</h2>
    <p>Separate date and time with a capital T.</p>
    <p>Indicate UTC time with a capital Z.</p>
    <p id="demo"></p>
    <script>
      const d = new Date("2015-03-25T12:00:00Z");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript ISO Dates</h2>
    <p>Change the time based on UTC by adding or subtracting hours and minutes.</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = new Date("2015-03-25T12:00:00-06:00");
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript new Date()</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("03/25/2015");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript new Date()</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("Mar 25 2015");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript new Date()</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("25 Mar 2015");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript new Date()</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("January 25 2015");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript new Date()</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("Jan 25 2015");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript new Date()</h2>
    <p id="demo"></p>
    <script>
      const d = new Date("JANUARY, 25, 2015");
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Date.parse()</h2>
    <p>Date.parse() gives you the count of milliseconds between a particular date and January 1, 1970.</p>
    <p id="demo"></p>
    <script>
      const msec = Date.parse("March 21, 2012");
      document.getElementById("demo").innerHTML = msec;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Date.parse()</h2>
    <p>Date.parse(string) returns milliseconds.</p>
    <p>You can use the return value to convert the string to a date object:</p>
    <p id="demo"></p>
    <script>
      let msec = Date.parse("March 21, 2012");
      const d = new Date(msec);
      document.getElementById("demo").innerHTML = d;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics