How To Get The Start And End Of The Day Using JavaScript

Posted on by Edward Anderson
Get the Start and End of the Day using JavaScript

We will learn to get the start and end of the day using JavaScript with two different methods: setHours() or new Date(). This basic knowledge is very helpful when you work with Dates in Javascript.

Get the start and end of the day using JavaScript

Using setHours()

The setHours() is not only used to change the hours of the date object but also change the minute, second, and millisecond of that Date.

Syntax:

setHours(hour, minute, second, millisecond)

Parameters:

  • hour: The hour to set between 0 and 23.
  • minute: The minute to set in between 0 and 59.
  • second: The second you want to set between 0 and 59.
  • millisecond: The millisecond you want to set between 0 and 999.

Suppose you have a Date object, and you want to get the start of the day. All you have to do is to set the hours, minutes, seconds, and milliseconds all to zero.

var day = new Date();
day.setHours(0, 0, 0, 0);
console.log(day);

Output:

Tue Oct 11 2022 00:00:00 GMT+0700

The above example sets the day object to the start of the day using the setHours() method with all parameters equal to 0. In addition, this method will return the epoch of the date after changing it. For example, if we assign a returned value of the function to a variable and print them:

var day = new Date();
var res = day.setHours(0, 0, 0, 0);
console.log(res);

Output:

1665421200000

We explained the function returns because it can be used to get the end of the day using that value. Just minus one from the value, and now you will get the epoch time of the end of the day. But that is yesterday, not the current day. So you will have to add that value with 86400000 milliseconds, which is a total of 1 day. Now all you have to do is to create a new Date object with a parameter that value:

var day = new Date();
var res = day.setHours(0, 0, 0, 0);
var end = new Date(res - 1 + 86400000);
console.log(end);

Output: 

Tue Oct 11 2022 23:59:59 GMT+0700

The logic behind this method is very simple to understand. If you don’t want to do the subtraction, you can use the setHours() to set the Date directly to the end of the day instead:

var day = new Date();
day.setHours(23, 59, 59, 999);
console.log(day);

Output:

Tue Oct 11 2022 23:59:59 GMT+0700

Using ‘new Date()‘

Recall that the new Date() constructor is much more different from the Date() constructor in the return value. The new Date() method is widely used more than the Date() to create a Date() object with the provided parameters.

Syntax:

new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)

Parameters:

  • year: The year to create a date
  • monthIndex: Equals to the month to create a date minus 1
  • day: The day to create a date
  • hours: The hour to create a date
  • minutes: The minutes to create a date
  • seconds: The seconds to create a date
  • milliseconds: The milliseconds to create a date

Ideally, the start of the day is when the value of hours, minutes, seconds, and milliseconds equals 0. Otherwise, the end of the day has an hours value is 23, minutes and seconds are 59, and milliseconds are 999. For example, if you want to get the start of the date 31/12/2035:

var day = new Date(2035, 11, 31, 0, 0, 0, 0);
console.log(day);

Output:

Mon Dec 31 2035 00:00:00 GMT+0700

Always remember to subtract your month value by 1 to get the monthIndex (The number 11 is December), as the monthIndex starts at the number 0, which is not the number 1 for January. Next, to get the end of the day of the date 31/12/2035:

var day = new Date(2035, 11, 31, 23, 59, 59, 999);
console.log(day);

Output: 

Mon Dec 31 2035 23:59:59 GMT+0700

This method is easy to understand but is recommended to be used if you know what your date is. If you don’t know what the Date is but you have a Date object, then you can use the instructions in this tutorial to get the year, month, and day of that object.

Summary

We have learned how to get the start and end of the day using JavaScript. You should know that each approach has its own advantages and disadvantages. Thanks for reading!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *