JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

Understanding Date and Time in JavaScript

JavaScript Date Object lets us work with dates.

In JavaScript, you might have to create a website with a calendar, a train schedule, or an interface to set up appointments.

These applications need to show relevant times based on the user's current timezone.


The Date Object

The Date object is a built-in object in JavaScript that stores the date and time.

It provides a number of built-in methods for formatting and managing that data.

Date objects are created with the new Date() constructor.

Run code

By default, JavaScript will use the browser's time zone and display a date as a full text string.


Creating Date Objects

There are 4 different ways to create a new date object.

You can use any of the following syntax to create a Date object using new Date() constructor.

new Date()

The new Date() creates a new date object with the current date and time:

Run code

new Date(milliseconds)

The new Date(milliseconds) creates a new date object as zero time plus milliseconds:

Run code

JavaScript understands the date based on a timestamp derived from Unix time, which is a value consisting of the number of milliseconds that have passed since midnight on January 1st, 1970.

01 January 1970 plus 252 4600 000 000 milliseconds is approximately 01 January 2050:

Run code

new Date(dateString)

The new Date(dateString) creates a new date object from a date string:

Run code

new Date(year, month, ...)

The new Date(year, month, ...) creates a new date object with a specified date and time:

7 numbers specify year, month, day, hour, minute, second, and millisecond (in that order):

Run code

In the above example, our seconds and milliseconds are set to 30 and 0.

If any number is missing from the Date creation, it will default to 0.

However, the order cannot be changed, so keep that in mind if you decide to leave off a number.

You may also notice that the month of January is represented by 0, not the usual 1.

This is because the date and time numbers start from 0, as most counting in programming does.

JavaScript counts months from 0 to 11. January is 0, December is 11.



Date Methods

When a Date object is created, a number of methods allow you to operate on it.

Date methods allow you to get and set the year, month, day, hour, minute, second, and millisecond of date objects, using either local time or UTC (universal, or GMT) time.


Retrieving the Date (get)

Once we have a object date, we can access all the components of the date with various built-in methods.

The methods will return each part of the date relative to the local timezone.

Each of these methods starts with get, and will return the relative number.

Below is a table of the get methods of the Date object:

Method Date/Time Range
getFullYear() Year YYYY
getMonth() Month 0-11 (0 = January)
getDate() Day (of the month) 1-31
getDay() Day (of the week) 0-6 (0 = Sunday)
getHours() Hour 0-23
getMinutes() Minute 0-59
getSeconds() Second 0-59
getMilliseconds() Millisecond 0-999
getTime() Timestamp Milliseconds since Epoch time

The getFullYear() Method

The getFullYear() method returns the year of a date as a four digit number.

Run code

The getMonth() Method

The getMonth() method returns the month of the year as a number (0 to 11).

Run code

JavaScript counts months from 0 to 11. January is 0, December is 11.

In the following example, the month variable holds the name of the month:

Run code

The getDate() Method

The getDate() method returns the day of the month as a number (1-31).

Run code

The getDay() Method

The getDay() method returns the day of the week as a number (0-6).

Run code

JavaScript counts week days from 0 to 6. Sunday is 0, Saturday is 6.

In the following example, the today variable holds the name of the day:

Run code

The getHours() Method

The getHours() method returns the hours of a date as a number (0-23).

Run code

The getMinutes() Method

The getMinutes() method returns the minutes of a date as a number (0-59).

Run code

The getSeconds() Method

The getSeconds() method returns the seconds of a date as a number (0-59).

Run code

The getMilliseconds() Method

The getMilliseconds() method returns the milliseconds of a date as a number (0-999).

Run code

The getTime() Method

The getTime() method returns the number of milliseconds since January 1, 1970.

Run code

One day (24 hours) is 86 400 000 milliseconds.


Modifying the Date (set)

For all the get methods that we learned about above, there is a corresponding set method.

Where get is used to retrieve a specific component from a date, set is used to modify components of a date.

Below is a table of the set methods of the Date object:

Method Date/Time Range
setFullYear() Year YYYY
setMonth() Month 0-11 (0 = January)
setDate() Day (of the month) 1-31
setDay() Day (of the week) 0-6 (0 = Sunday)
setHours() Hour 0-23
setMinutes() Minute 0-59
setSeconds() Second 0-59
setMilliseconds() Millisecond 0-999
setTime() Timestamp Milliseconds since Epoch time

The setFullYear() Method

The setFullYear() method sets the year of a date object.

Run code

The setFullYear() method can optionally set month and day.

Run code

The setMonth() Method

The setMonth() method sets the month of a date object (0-11).

Run code

The setDate() Method

The setDate() method sets the day of the month of a date object (1-31).

Run code

The setHours() Method

The setHours() method sets the hours of a date object (0-23).

Run code

The setMinutes() Method

The setMinutes() method sets the minutes of a date object (0-59).

Run code

The setSeconds() Method

The setSeconds() method sets the seconds of a date object (0-59).

Run code

The setMilliseconds() Method

The setMilliseconds() method sets the milliseconds of a date object (0-999).

Run code

The setTime() Method

The setTime() method sets the Date object to the time represented by a number of milliseconds since January 1, 1970.

Run code

Date Methods with UTC

The get methods discussed above retrieve the date components based on the user's local timezone settings.

For increased control over the dates and times, you can use the getUTC methods, which are exactly the same as the get methods, except they calculate the time based on the UTC (Coordinated Universal Time) standard.

Below is a table of the UTC methods for the JavaScript Date object:

Method Date/Time Range
getUTCFullYear() Year YYYY
getUTCMonth() Month 0-11 (0 = January)
getUTCDate() Day (of the month) 1-31
getUTCDay() Day (of the week) 0-6 (0 = Sunday)
getUTCHours() Hour 0-23
getUTCMinutes() Minute 0-59
getUTCSeconds() Second 0-59
getUTCMilliseconds() Millisecond 0-999

To test the difference between local and UTC get methods, we can run the following code:

Run code

Running this code will print out the current hour, and the hour of the UTC timezone. If you are currently in the UTC timezone the numbers that are output from running the program above will be the same.


More Examples

In this example JavaScript displays the current time.

00:00:00
Run code

Complete Date Reference

For a complete properties and methods reference, visit our JavaScript Date Reference.

The reference section contains descriptions and examples of all Date properties and methods.