Get the Start and End of the Day using JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 5, 2024
3 min

banner

# Table of Contents

  1. Get the Start and End of the Day in UTC
  2. Get the Start and End of the Day in Local time

# Get the Start and End of the Day in UTC

Use the setUTCHours() method to get the start and end of the day, e.g. startOfDay.setUTCHours(0, 0, 0, 0).

The method takes the hours, minutes, seconds and milliseconds as parameters and sets them for the specified date according to universal time.

index.js
// ✅ In UTC (international time standard) // - keeps code consistent across time zones const startOfDay = new Date(); startOfDay.setUTCHours(0, 0, 0, 0); console.log(startOfDay); const endOfDay = new Date(); endOfDay.setUTCHours(23, 59, 59, 999); console.log(endOfDay);

get start and end of day in utc

The code for this article is available on GitHub

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

The setUTCHours() method takes 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.
The setUTCHours method sets the provided values on the specified date according to universal time (UTC).

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, it's best to store dates and times and do most of your business logic in UTC. You can then format and render the date and time depending on the user's locale.

# Get the Start and End of the Day in Local time

You can also use the user's local time to get the start and end of the day.

Local time refers to the time zone the visitor's computer is in.

index.js
// ✅ In Local Time (the time zone the visitor's computer is in) // - will differ for users with different GEOs const start = new Date(); start.setHours(0, 0, 0, 0); console.log(start); const end = new Date(); end.setHours(23, 59, 59, 999); console.log(end);

get start and end of day in local time

The code for this article is available on GitHub

We used the setHours() method instead of setUTCHours.

The difference between the two is that setHours sets the provided values on the date according to local time (the visitor's local time).

Depending on where the user visits your site from, this would yield different results.

The setUTCHours() method does the same, but according to universal time.

For example, if you store a local time of midnight (00:00) in your database, you wouldn't know if that's midnight in Tokyo (Japan), Paris (France), in New York (US), etc. These are all different moments that are hours apart.

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.