Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript | Date Formats

  • Last Updated : 20 Mar, 2019

JavaScript Date Input: There are many ways in which one can format the date in JavaScript.

Formats:

  • ISO Date
    "2019-03-06" (The International Standard)
  • Short Date
    "03/06/2019"
  • Long Date
    "Mar 06 2019" or "06 Mar 2019"

Example 1: This example uses ISO date format to display the date.




<!DOCTYPE html>
<html>
    <head>
        <title>Date format</title>
    </head>
    <body>
        <center>
            <div style="background-color: white;">
                <h1>Welcome to GeeksforGeeks!.</h1>
                <h3>JavaScript ISO Dates:</h3>
                <p id="name" style="background-color: green;"></p>
            </div>
        </center>
        <script>
            let dat = new Date("2015-03-25");
            document.getElementById("name").innerHTML = dat;
        </script>
    </body>
</html>                    

Output:

JavaScript ISO Dates Format Output:



  • Complete date (Date(“2019-03-06”)):
    Wed Mar 06 2019 02:07:00 GMT+0530 (India Standard Time)
  • Year and Month (Date(“2019-03”)):
    Fri Mar 01 2019 02:07:00 GMT+0530 (India Standard Time)
  • Only Year (Date(“2019”)):
    Tue Jan 01 2019 02:07:00 GMT+0530 (India Standard Time)
  • Only Year (Date(“2019-03-06T12:00:00Z”)):
    Wed Mar 06 2019 02:07:00 GMT+0530 (India Standard Time)

JavaScript Short Dates: The JavaScript short dates are written in MM/DD/YYYY format.
Syntax:

"MM/DD/YYYY"

JavaScript Long Dates: The JavaScript long dates are written in MMM DD YYYY format.
Syntax:

"MMM DD YYYY"

Example 2: This example uses short date format.




<!DOCTYPE html>
<html>
    <head>
        <title>Date format</title>
    </head>
    <body>
        <center>
            <div style="background-color: green;">
                <h1>Welcome to GeeksforGeeks!.</h1>
                <h3>JavaScript ISO Dates:</h3>
                <p id="name"></p>
            </div>
        </center>
        <script>
            var x = new Date("03/06/2019");
            document.getElementById("name").innerHTML = x;
        </script>
    </body>
</html>

Output:

toTimeString() Method: It is used to return the time portion of the given date object in English. The date object is created by using date() constructor. This method converts the time portion of the date in to a string.

Syntax:

var string_name = date_variable.toTimeString

Example:




<!DOCTYPE html>
<html>
    <body onload="myFunction()">
        <center>
        <div style="background-color: green;">
            <h1>Geeksforgeeks !!</h1>
            <p id="geek"></p>
        </div>
        <script>
            function myFunction() {
              let dt = new Date();
              let s = dt.toTimeString();
              document.getElementById("geek").innerHTML = s;
            }
        </script>
    </body>
</html>

Output:

Date.parse() Method: The Date.parse() function is used to help the exact number of milliseconds that have passed since midnight, January 1, 1970, till the date we provide. It converts the valid date string given to it in milliseconds.

Syntax:

var var_name = Date.parse(valid_date_string)

Example:




<!DOCTYPE html>
<html>
    <body>
        <center>
        <div style="background-color: green;">
            <h1>Geeksforgeeks !!</h1>
            <b>Date.parse() returns the number milliseconds</b>
            <p id="geek"></p>
        </div>
        <script>
            let msec = Date.parse("March 21, 2012");
            document.getElementById("geek").innerHTML = msec;
        </script>
    </body>
</html>

Output:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!