JavaScript | Date Formats

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                 

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.