Skip to content
Related Articles

Related Articles

Improve Article

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=
          </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=
          </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 arrow_drop_up
Recommended Articles
Page :