Set a Date's hours, minutes and seconds to 0 in JavaScript

Set a Date's Hours, Minutes and Seconds to 0 in JavaScript #

Use the setHours() method to set a date's hours, minutes and seconds to 0, e.g. date.setHours(0, 0, 0, 0). The setHours method takes the hours, minutes, seconds and milliseconds as parameters and sets the values on the date.

Copied!
const date = new Date();

date.setHours(0, 0, 0, 0);

console.log(date); // 👉️ Sat Jan 22 2022 00:00:00

We used the Date.setHours method to set the hours, minutes and seconds of a date to 0.

The 4 parameters we passed to the methods are:

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

If you want to create a new Date object with the same date, where the values for the hours, minutes and seconds are set to 0, create a copy of the Date before calling the setHours method.

Copied!
const date = new Date();

const dateCopy = new Date(date.getTime());

dateCopy.setHours(0, 0, 0, 0);

console.log(dateCopy); // Sat Jan 22 2022 00:00:00

// 👇️ didn't change original
console.log(date); // 👉️ Sat Jan 22 2022 16:34:40

We used the getTime method to get the number of milliseconds elapsed between the 1st of January, 1970 00:00:00 and the given date.

Copying the date is quite useful when you have to use the original Date object in other places in your code.

An alternative approach is to use the getFullYear, getMonth and getDate methods to create a new Date object where the hours, minutes and seconds are set to 0.

Copied!
const date = new Date();

const withoutTime = new Date(
  date.getFullYear(),
  date.getMonth(),
  date.getDate(),
);

console.log(withoutTime); // 👉️ Sat Jan 22 2022 00:00:00

The 3 parameters we passed to the Date() constructor are:

1. year - a 4-digit integer value representing the year of the date.
2. monthIndex - an integer value from 0 (January) to 11 (December) that represents the month.
3. day - an integer value representing the day of the month.

We used the following 3 date-related methods:

• Date.getFullYear method - returns a four-digit number representing the year that corresponds to a date.

• Date.getMonth - returns an integer between 0 (January) and 11 (December) and represents the month for a given date. Yes, unfortunately the getMonth method is off by 1.

• Date.getDate - returns an integer between 1 and 31 representing the day of the month for a specific date.