Before we go through the tutorial of Display Current Date and Time in HTML using JavaScript, we have to know the brief of JavaScript and the Date method in JS.
Scroll to bottom, to check live view
Introduction
JavaScript is light-weight a client-side scripting language used to build client-side validations and much more. Today we use it to display the current date and time in the HTML input box.
We use JavaScript Date object to get current date and time.
Also Read: Migrate WordPress Site To New Host Manually
Creating JS Date Object
JavaScript date object helps to get the current date and time which we will also use to get the visitor’s current time and date, to store on the database also.
|
1 2 3 |
<script> var today = new Date(); </script> |
Use Get Method to Display Current Date in JavaScript
Use the below source code to display the current date in the HTML input box using JavaScript in the “Y-m-d” format.
|
1 2 3 4 5 6 7 8 |
Current Date: <input type="text" id="currentDate"> <script> var today = new Date(); var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); document.getElementById("currentDate").value = date; </script> |
Explanation:
- getFullYear() – Get the current year like 2020.
- getMonth() – Get current month values 0-11. Where 0 for Jan and 11 for Dec. So added +1 to get the result.
- getDate() – Get the day of the month values 1-31.
Use Get Method to Display Current Time in JavaScript
We will use the same get method to display the current time and also display it on the HTML text box.
Format “H:i:s“
|
1 2 3 4 5 6 7 8 |
Current Time: <input type="text" id="currentTime"> <script> var today = new Date(); var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); document.getElementById("currentTime").value = time; </script> |
Explanation:
- getHours() – Get current hour between 0-23.
- getMinutes() – Get current minutes between 0-59.
- getSeconds() – Get current seconds between 0-59.
Display Both the Current Date and Time in HTML using JavaScript
See the Pen Get Current Date and Time Using JS by Bikash Panda (@phpcodertech) on CodePen.
Above is the complete explanation of the source code of Display Current Date and Time in HTML using JavaScript.
Also Check:
- How JavaScript For Loop Works (Complete Guide With Example)
- Create Repository & Push Code To GitHub First Time
- Set-up Firebase Project using Firebase Console
Happy Coding..!
Git Command to Get the Latest Code From Master
nice information
Hello
I am trying to create time blocks to text.
For example time 09:00 – 10:00 second lesson hour buzy and so on and after an specific time the text there are no lessons anymore.
I reciept an html line, but it isnt working and i can not create anything.
let text = “test”;
let i = 0;
while (i < 10) { var d = new Date(); var n = d.toLocaleTimeString(); i++; // na dit uur, voor dit uur document.getElementById("demo").innerHTML = n; } Can someone help me?