Initialize a Date to Midnight using JavaScript

Initialize a Date to Midnight using JavaScript #

Use the setHours() method to initialize a date to midnight, e.g. d.setHours(0, 0, 0, 0). The setHours method takes the hours, minutes, seconds and milliseconds as parameters and sets the value on the Date instance.

Copied!
// Time of writing article = 14th January, 2022

// ✅ Set date to Nearest Midnight in the Past
const d1 = new Date();
d1.setHours(0, 0, 0, 0);

console.log(d1); // Fri Jan 14 2022 00:00:00

// ✅ Set date to Nearest Midnight in the future
const d2 = new Date();
d2.setHours(24, 0, 0, 0);

console.log(d2); // Sat Jan 15 2022 00:00:00

We used the Date() constructor to create a Date object that represents the current date and time.

The setHours method takes the following 4 parameters:

1. hoursValue - an integer between 0 and 23 that represents the hour.
2. minutesValue (optional) - an integer between 0 and 59 that represents the minutes.
3. secondsValue (optional) - an integer between 0 and 59 that represents the seconds.
4. msValue (optional) - a number between 0 and 999 that represents the milliseconds.

In the second example, we passed 24 as the value for the hours to set the date to the nearest midnight in the future.

Note that the setHours() method sets the time according to the visitor's local time (time zone the visitor's computer is in).

If you want to initialize a date to midnight in UTC, use the setUTCHours() instead of setHours().

Copied!
// ✅ (UTC) Set date to Nearest Midnight in the Past
const d1 = new Date();
d1.setUTCHours(0, 0, 0, 0);

console.log(d1);

// ✅ (UTC) Set date to Nearest Midnight in the future
const d2 = new Date();
d2.setUTCHours(24, 0, 0, 0);

console.log(d2);

We used the setUTCHours method instead of setHours.

UTC (Coordinated Universal Time) and GMT share the same current time.

The difference between the two is that UTC is a time standard and GMT is a time zone.

UTC is an international time standard, which is used for consistency between time zones.

For consistency, you should mostly use local time when you have to render a date and time to the user, but store the actual values in UTC.