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

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

Recommended Posts: