JavaScript Date Format dd-mm-yyyy
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of JavaScript date format dd-mm-yyyy, in the HTML page, we can display date, time, local time zone, etc. using the JavaScript Date() method. In this Date() method we can create a date object.
We are going to use the getDate(), getMonth() and getFullYear() methods to get the date format to dd-mm-yyyy format.
Step By Step Guide On JavaScript Date Format dd-mm-yyyy :-
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> JavaScript date format dd-mm-yyyy </title>
<style>
body {
font-family : 'Lucida Sans', Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript date format dd-mm-yyyy </h3>
<strong> Date in dd-mm-yyyy: </strong>
<p id = "today"></p>
<script>
let datetoday = document.getElementById("today") ;
let today = new Date() ;
let day = `${today.getDate() <10 ? "0" : ""} ${today.getDate()}` ;
let month = `${(today.getMonth()+1) <10 ? "0" : ""} ${today.getMonth() + 1}` ;
let year = today.getFullYear() ;
datetoday.textContent = `${day}-${month}-${year}`
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Add a <p> with id that will display the date
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- First create a variable named ‘today’ for a date object.
- Now for the day object, first add a $ dollar identifier then add a ternary operator to .getdate() that if the day is less than 10 then add the 0 before it or get the day.
- Now for the month object, first add a $ dollar identifier then add a ternary operator to .getMonth() that if the month +1 is less than 10 then add the 0 before it or get the month +1.
- Now for the year object, just add today.getFullYear() to get the year.
- .textContent then use the $ dollar identifier to get the dd-mm-yyyy format.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to convert the date in format dd-mm-yyyy using JavaScript.
I hope this article on JavaScript date format dd-mm-yyyy helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
