JavaScript | Get the start and end of the day in UTC

Last Updated : 11 Jun, 2019

Given a date, the task is to determine the start and end of the day using javascript. We’re going to discuss a few techniques.
First few methods to know.

JavaScript setHours() Method:
This method sets the hour of a date object.
This method can be used to set the minutes, seconds and milliseconds.
Syntax:
```
Date.setHours(hour, min, sec, millisec)
```
Parameters:
- hour: This parameter is required. It specifies the integer denoting the hours. Values accepted are 0-23, but other values are also allowed.
  - -1 means the last hour of the previous day and 24 means the first hour of the next day.
- min: This parameter is optional. It specifies the integer representing the minutes. Values accepted are 0-59, but other values are also allowed.
  - 60 means the first minute of next hour and -1 means the last minute of the previous hour.
- sec: This parameter is optional. It specifies the integer representing the seconds. Values accepted are 0-59, but other values are also allowed.
  - 60 means the in the first second of next minute and -1 means the last second of previous minute.
- millisec: This parameter is optional. It specifies the integer representing the milliseconds. Values accepted are 0-999, but other values are also allowed.
  - -1 means the last millisecond of previous second and 1000 means the first millisecond of next second.
Return value:
It returns a number, representing the number of milliseconds between the date object and midnight January 1, 1970.

JavaScript toUTCString() Method:
This method converts a Date object to a string, depending on universal time.
Syntax:

Date.toUTCString()

Return Value:
It returns a string, representing the UTC date and time as a string.

Example 1: This example gets the first millisecond of the day and last millisecond of the day as well using setHours() method and converting it to UTC format using stoUTCString() method.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Get start and end of day in UTC.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP"
       style="font-size: 15px; 
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun(); ">
        click here
    </button>
    <p id="GFG_DOWN"
       style="color: green;
              font-size: 24px;
              font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML =
          'Click on the button to get the'+
          ' start and end of the day in UTC';
        
        var down = document.getElementById('GFG_DOWN');
        var startOfDay = new Date();
        startOfDay.setHours(0, 0, 0, 0);
        var endofDay = new Date();
        endofDay.setHours(23, 59, 59, 999);
  
        function GFG_Fun() {
            down.innerHTML = startOfDay.toUTCString() + 
              '<br>' + endofDay.toUTCString();
        }
    </script>
</body>
  
</html>

Output:

Before clicking on the button:
After clicking on the button:

Example 2: This example gets the first millisecond of the day and last millisecond of the day but by a different approach than previous one using setHours() method and converting it to UTC format using stoUTCString() method.

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | Get start and end of day in UTC.
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;" 
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP"
       style="font-size: 15px; 
              font-weight: bold;">
    </p>
    <button onclick="GFG_Fun(); ">
        click here
    </button>
    <p id="GFG_DOWN" 
       style="color: green; 
              font-size: 24px; 
              font-weight: bold;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        up.innerHTML = 
          'Click on the button to get the start '+
          'and end of the day in UTC';
        
        var down = document.getElementById('GFG_DOWN');
        var startOfDay = new Date();
        startOfDay.setHours(0, 0, 0, 0);
        var endofDay = new Date();
        endofDay.setHours(24, 0, 0, -1);
  
        function GFG_Fun() {
            down.innerHTML = startOfDay.toUTCString() +
              '<br>' + endofDay.toUTCString();
        }
    </script>
</body>
  
</html>

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Related Articles