JavaScript Date constructor

and methods

Introduction to the JavaScript Date Constructor and Methods

JavaScript provides several built-in objects, including the Date object. The Date object enables developers to work with dates and times, including creating new Date objects, formatting dates and times, and performing calculations. This tutorial will walk through the basics of the Date constructor and associated methods.

Creating a Date Object

The Date constructor is used to create objects that represent a given date and time. The Date constructor takes several parameters which represent the date, time, and time zone. Depending on how many parameters are passed to the constructor, the Date object can represent a date and time, a time only, or a date only.

Creating a Date Object with Date and Time

To create a Date object that represents a date and time, pass the year, month, day, hours, minutes, seconds, and milliseconds as parameters to the Date constructor. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let dateTime = new Date(2019, 5, 25, 15, 0, 0, 0);

[/dm_code_snippet]

This code creates a Date object that represents the date and time June 25th, 2019 at 3:00pm.

Creating a Date Object with Time Only

To create a Date object that represents a time only, pass the hours, minutes, seconds, and milliseconds as parameters to the Date constructor. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let timeOnly = new Date(0, 0, 0, 15, 0, 0, 0);

[/dm_code_snippet]

This code creates a Date object that represents the time 3:00pm.

Creating a Date Object with Date Only

To create a Date object that represents a date only, pass the year, month, and day as parameters to the Date constructor. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let dateOnly = new Date(2019, 5, 25);

[/dm_code_snippet]

This code creates a Date object that represents the date June 25th, 2019.

Formatting Dates and Times

The Date object has several methods that can be used to format dates and times. These methods return a string that contains the formatted date or time.

Formatting Date and Time with toDateString()

The toDateString() method formats the date and time as a string. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let dateTime = new Date(2019, 5, 25, 15, 0, 0, 0);
let dateTimeString = dateTime.toDateString();

[/dm_code_snippet]

The dateTimeString variable will contain the string “Tue Jun 25 2019”.

Formatting Date Only with toLocaleDateString()

The toLocaleDateString() method formats the date only as a string. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let dateOnly = new Date(2019, 5, 25);
let dateOnlyString = dateOnly.toLocaleDateString();

[/dm_code_snippet]

The dateOnlyString variable will contain the string “6/25/2019” (formatted for the user’s locale).

Formatting Time Only with toLocaleTimeString()

The toLocaleTimeString() method formats the time only as a string. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let timeOnly = new Date(0, 0, 0, 15, 0, 0, 0);
let timeOnlyString = timeOnly.toLocaleTimeString();

[/dm_code_snippet]

The timeOnlyString variable will contain the string “3:00:00 PM” (formatted for the user’s locale).

Calculating Dates and Times

The Date object has several methods that can be used to perform calculations with dates and times. These methods return a number that indicates the number of milliseconds between two dates.

Calculating Date and Time Difference with getTime()

The getTime() method calculates the difference between two dates and times. For example:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let dateTime1 = new Date(2019, 5, 25, 15, 0, 0, 0);
let dateTime2 = new Date(2019, 5, 26, 15, 0, 0, 0);
let timeDifference = dateTime2.getTime() - dateTime1.getTime();

[/dm_code_snippet]

The timeDifference variable will contain the number 86400000, which is the number of milliseconds in one day.

Conclusion

The Date constructor and associated methods enable developers to work with dates and times in JavaScript. This tutorial has walked through the basics of the Date constructor and methods, including creating Date objects, formatting dates and times, and performing calculations with dates and times.