Date Formats in JavaScript

In JavaScript, you can input and display dates in different formats. In order to learn about the date formats, a basic understanding of how to work with dates is required. So in this tutorial, we will first take a look at the fundamental concepts of dates, and then we will start learning about date formats in JavaScript.

Displaying the Current Date and Time

Displaying the current date and time is very easy in JavaScript. Examine the following code snippets to understand how to display the current date and time on a web page. Date() returns the current date and time. In the code example below, the value of Date() is placed between <p> and </p> tags with id=”test”.

<!DOCTYPE html> <html> <head> <title>Displaying the current date and time</title> </head> <body> <p id="test"></p> <script> document.getElementById("test").innerHTML = Date(); //Output: Tue Feb 14 2017 23:14:06 GMT-0700 (Pacific Daylight Time) </script> </body> </html>

You can also display the current date and time using the Date object. The following example shows how to do it. In the example below, Date() is a constructor and ‘date’ is an object, it’s a Date object. And ‘new’ is a keyword in JavaScript, which is used to create objects. The value of the object ‘date’ is placed between <p> and </p> tags with id=”test”.

<p id="test"></p> <script> var date = new Date(); //Creating a Date object document.getElementById("test").innerHTML = date; //Output: Tue Feb 14 2017 23:14:06 GMT-0700 (Pacific Daylight Time) </script>

Initiating a Date Object in Different Ways

We can initiate a Date object in 4 ways. Here, ‘initiating an object’ means to give some value to the object.

Note that although the Date objects in the code examples of this section are initiated in different ways, they are displayed in the same format, in the full date format.

new Date(): In the example below, we’re initiating a Date object with the current date and time.

var date = new Date();

new Date(milliseconds): Here, the Date object is initiated with the number of milliseconds since Jan 1, 1970, 00:00:00. In this example, the number of milliseconds is 6785657444.

<p id="test"></p> <script> var date = new Date(6785657444); document.getElementById("test").innerHTML = date; //Output: Fri Mar 20 1970 18:24:17 GMT-0700 (Pacific Daylight Time) </script>

new Date(dateString): We can initiate a Date object with a specified date string. Date string simply means a date value as a string. In this example, the specified date string is "November 15, 2017 06:03:40".

<p id="test"></p> <script> var date = new Date("November 15, 2017 06:03:40"); document.getElementById("test").innerHTML = date; //Output: Wed Nov 15 2017 06:03:40 GMT-0700 (Pacific Daylight Time) </script>

new Date(year, month, day, hours, minutes, seconds, milliseconds): We can initiate a Date object with year, month, day, hours, minutes, seconds, and milliseconds. In the example below, 92 is the year. It means 1992. 4 is the month. Month starts from 0. So the month is May. 14, 12, 40, 15, and 13 are day, hours, minutes, seconds, and milliseconds respectively.

<p id="test"></p> <script> </div> var date = new Date(92, 4, 14, 12, 40, 15, 13); document.getElementById("test").innerHTML = date; //Output: Thu May 14 1992 12:40:15 GMT-0700 (Pacific Daylight Time) </script>

In the code shown below, the last 3 parameters of the Date() constructor are omitted. You can omit any of the last 4 parameters from the list of 7 parameters.

<p id="test"></p> <script> var date = new Date(92, 4, 14, 12); document.getElementById("test").innerHTML = date; //Output: Thu May 14 1992 12:00:00 GMT-0700 (Pacific Daylight Time) </script>

The last 4 parameters are omitted in the example below.

<p id="test"></p> <script> var date = new Date(92, 4, 14); document.getElementById("test").innerHTML = date; //Output: Thu May 14 1992 00:00:00 GMT-0700 (Pacific Daylight Time) </script>

Date Input Formats

There are four date input formats in JavaScript. They are explained as follows.

Note that in all the code examples of this section, the dates are displayed in the same format, in the full date format despite the fact that different date input formats have been used.

ISO date: The following code example accepts a date in the ISO date format.

var date = new Date("2017-01-15");

ISO date with year and month:

var date = new Date("2017-01");

ISO date with only year:

var date = new Date("2017");

ISO date with hours, minutes, and seconds:

var date = new Date("2017-01-15T11:10:10Z");

In the example above, T separates the date and time and Z defines UTC time. We can modify the time in the following way. Notice that we have added -04:10 and removed Z.

var date = new Date("2017-01-15T11:10:10-04:10");

Short date: A short date is used in the example below.

var date = new Date("01/15/2017");

Long date: Long dates are used in the following examples.

var date = new Date("January 15 2017");

Abbreviated form of month:

var date = new Date("Jan 15 2017");

Month in capital letters:

var date = new Date("JANUARY 15 2017");

Commas are ignored as shown in the example below.

var date = new Date("JANUARY, 15, 2017");

Full date: The following example uses a full date format.

var date = new Date("Tue Feb 14 2017 22:09:22 GMT-0700 (Pacific Daylight Time)");

Converting Dates to Strings

Automatic conversion: Dates are automatically converted to strings in JavaScript. In the following example, the value of ‘date’ is automatically converted to string.

document.getElementById("test").innerHTML = date;

The toString() method: Although a date is automatically converted to string in JavaScript, you can use the toString() method to perform the conversion operation. In the example below, the toString() method of the Date object converts a date to string.

document.getElementById("test").innerHTML = date.toString();

Other JavaScript methods: There are a few other JavaScript methods such as toUTCString() and toDateString() that convert dates to strings. These methods are explained in the next section.

Displaying Dates in Simple Formats

JavaScript lets you display dates in simple and more readable formats. The following code examples demonstrate how to show dates in easy-to-understand formats.

The toUTCString() method: The toUTCString() method of the Date object converts a date to a UTC string as shown in the example below. UTC is a date display standard.

<p id="test"></p> <script> var date = new Date(); document.getElementById("demo").innerHTML = date.toUTCString(); </script>

The toDateString() method: The toDateString() method of the Date object converts a date to a very simple date format as shown in the following example.

<p id="test"></p> <script> var date = new Date(); document.getElementById("demo").innerHTML = date.toDateString(); </script>

A Complete Code Sample

<!DOCTYPE html> <html> <head> <title>Date Formats in JavaScript</title> </head> <body> Test 1: <p id="test 1"></p><br> Test 2: <p id="test 2"></p><br> Test 3: <p id="test 3"></p><br> Test 4: <p id="test 4"></p><br> Test 5: <p id="test 5"></p><br> Test 6: <p id="test 6"></p><br> Test 7: <p id="test 7"></p><br> Test 8: <p id="test 8"></p><br> <script> //Creating a Date object using ‘new Date(milliseconds)’ //The date will be displayed in the full date format. var date = new Date(76765444); document.getElementById("test 1").innerHTML = date; //Creating a Date object using ‘new Date(year, month, day, hours, minutes, seconds, milliseconds)’ //The date will be displayed in the full date format. var date = new Date(92, 6, 21, 35, 16, 51, 32); document.getElementById("test 2").innerHTML = date; //Date input format: ISO date //The date will be displayed in the full date format. var date = new Date("2017-01-15"); document.getElementById("test 3").innerHTML = date; //Date input format: Short date //The date will be displayed in the full date format. var date = new Date("01/15/2017"); document.getElementById("test 4").innerHTML = date; //Date input format: Long date //The date will be displayed in the full date format. var date = new Date("15 Jan 2017"); document.getElementById("test 5").innerHTML = date; //Date input format: Full date //The date will be displayed in the full date format. var date = new Date("Tue Feb 14 2017 22:09:22 GMT-0700 (Pacific Daylight Time)"); document.getElementById("test 6").innerHTML = date; //Displaying a date in UTC string format var date = new Date(); document.getElementById("test 7").innerHTML = date.toUTCString(); //Displaying a date in a very simple date format var date = new Date(); document.getElementById("test 8").innerHTML = date.toDateString(); /* Output: ------ Test 1: Fri Jan 02 1970 02:49:25 GMT-0700 (Pacific Daylight Time) Test 2: Wed Jul 22 1992 11:16:51 GMT-0700 (Pacific Daylight Time) Test 3: Sun Jan 15 2017 05:30:00 GMT-0700 (Pacific Daylight Time) Test 4: Sun Jan 15 2017 00:00:00 GMT-0700 (Pacific Daylight Time) Test 5: Sun Jan 15 2017 00:00:00 GMT-0700 (Pacific Daylight Time) Test 6: Tue Feb 14 2017 22:09:22 GMT-0700 (Pacific Daylight Time) Test 7: Tue, 14 Feb 2017 17:12:16 GMT Test 8: Tue Feb 14 2017 */ </script> </body> </html>

What we have learned

We can initiate a Date object using the following: new Date(), new Date(milliseconds), new Date(dateString), and new Date(year, month, day, hours, minutes, seconds, milliseconds).

There are 4 date input formats in JavaScript, which are as follows: ISO date, short date, long date, and full date.

Dates are automatically converted to strings in JavaScript. We can also convert dates to strings using the toString() method.

We can convert a date to a UTC string using the toUTCString() method.

The toDateString() method converts a date to a very simple and readable date format.