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;"> neveropen </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;"> neveropen </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> |
Output:
