All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Format Dates In JavaScript

Last Updated : Mar 11, 2024

Format Dates In JavaScript

In this article we will show you the solution of format dates in JavaScript, there is various way to format dates in JavaScript.

In this tutorial we are going to use getDay(), getMonth(), and getFullYear() methods to format dates in JavaScript and also display the date in dd-mm-yyyy format.

Step By Step Guide On Format Dates In JavaScript :-

We will see an example first, to format date in JavaScript.

In the below example, we are going to format dates using JavaScript. let us see the code first.

<!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> format dates in JavaScript </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> format dates in JavaScript </h3>
    <script>
        var today = new Date() ;
        document.write(formatDate(today) + "<br>" ) ;
        function formatDate(pd) {
            var date = pd.getDate() ;
            var month = pd.getMonth() ;
            month++ ;
            var year = pd.getFullYear() ;
            return date + "-" + month + "-" + year ;
        }
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Created the <style> tag to add CSS to the HTML page.
  8. To add JavaScript Create a <script> tag.
  9. First create a variable named ‘today’ for a date object.
  10. calling a function that contains the date within document.write().
  11. Into that function create a formal variable ‘pd’
  12. Now for getting the date, use getDate( ) within the variable ‘date’
  13. For getting the month, using getMonth( ) within the variable ‘month’ and also using month++ , because in JavaScript count starts from zero.
  14. For getting the full year, using getFullYear( ) within the variable ‘year’.
  15. Return the date, month, and year in dd-mm-yyyy format.

Conclusion :-

At last, here in conclusion, here we can say that with this article’s help, we know how to format dates in JavaScript.

I hope this article on format dates in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪