How to format current date in MM/DD/YYYY HH:MM:SS format using JavaScript ?

0 0 1 minute read

Given a date and the task is to format the current date in MM/DD/YYYY HH:MM:SS format. Here are a few of the most techniques discussed with the help of JavaScript.

Approach 1:

Store the current date in variable.
Use the string concatenation technique to insert / and : in between the month-day and day-year.
Use .slice() method to format the day, month to 2 digits.

Example: This example implements the above approach.

html

<body> 
    <h1 style="color:green;"> 
        zambiatek 
    </h1> 
  
    <p id="GFG_UP"> 
    </p> 
  
    <button onclick="gfg_Run()"> 
        Click Here 
    </button> 
  
    <p id="GFG_DOWN"> 
    </p> 
  
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var date = new Date(); 
        el_up.innerHTML = "Click on the button to format" 
            + " the date accordingly.<br>Date = " + date; 
          
        function gfg_Run() { 
            var Str = 
                ("00" + (date.getMonth() + 1)).slice(-2) 
                + "/" + ("00" + date.getDate()).slice(-2) 
                + "/" + date.getFullYear() + " " 
                + ("00" + date.getHours()).slice(-2) + ":" 
                + ("00" + date.getMinutes()).slice(-2) 
                + ":" + ("00" + date.getSeconds()).slice(-2); 
                  
            el_down.innerHTML = Str; 
        } 
    </script> 
</body>

Output:

Approach 2:

Store the current date in a variable.
Use the .join() method to insert / and : in between the month-day and day-year.
Create a prototype padding to format the day, and month into 2 digits.

Example: This example implements the above approach.

html

<body> 
  
    <h1 style="color:green;"> 
        zambiatek 
    </h1> 
  
    <p id="GFG_UP"> 
    </p> 
  
    <button onclick="gfg_Run()"> 
        Click Here 
    </button> 
  
    <p id="GFG_DOWN"> 
    </p> 
  
    <script> 
        var el_up = document.getElementById("GFG_UP"); 
        var el_down = document.getElementById("GFG_DOWN"); 
        var d = new Date(); 
          
        el_up.innerHTML = "Click on the button to format" 
                + " the date accordingly.<br>Date = " + d; 
        Number.prototype.padding = function(base, chr) { 
            var len = (String(base || 10).length 
                        - String(this).length) + 1; 
                          
            return len > 0 ? new Array(len).join(chr || '0') 
                    + this : this; 
        } 
          
        function gfg_Run() { 
            str = [(d.getMonth()+1).padding(), 
                    d.getDate().padding(), 
                    d.getFullYear()].join('/') 
                    + ' ' + [ d.getHours().padding(), 
                    d.getMinutes().padding(), 
                    d.getSeconds().padding()].join(':'); 
            el_down.innerHTML = str; 
        } 
    </script> 
</body>