How to get current formatted date dd/mm/yyyy in JavaScript ?

The task is to format the current date in dd/mm/yyyy format by using JavaScript. We’re going to discuss few methods.
First few methods to know

  • JavaScript getDate() Method:
    This method returns the day of the month (from 1 to 31) for the defined date.
    Syntax:

    Date.getDate()
    

    Return value:
    It returns a number, from 1 to 31, representing the day of the month.

  • JavaScript getFullYear() Method:
    This method returns the year (four digits for dates between year 1000 and 9999) of the defined date.
    Syntax:



    Date.getFullYear()
    

    Return value:
    It returns a number, representing the year of the defined date

  • JavaScript getMonth() Method:
    This method returns the month (from 0 to 11) for the defined date, based on to local time.
    Syntax:

    Date.getMonth()
    

    Return value:
    It returns a number, from 0 to 11, representing the month.

  • JavaScript String slice() method:
    This method gets parts of a string and returns the extracted parts in a new string.
    It uses the start and end parameters to define the part of the string to extract.
    First character starts from position 0, the second has position 1, and so on.
    Syntax:

    string.slice(start, end)
    

    Parameters:

    • start: This parameter is required. It specifies the position from where to start the extraction. First character is at position 0
    • end: This parameter is optional. It specifies the position (excluding it) where to stop the extraction. If not used, slice() selects all characters from the start-position till the end of string.

    Return value:
    It returns a string, representing the extracted part of the string.

  • replace() method:
    This method searches a string for a defined value, or a regular expression, and returns a new string with the replaced defined value.
    Syntax:

    string.replace(searchVal, newvalue)
    

    Parameters:

    • searchVal: This parameter is required. It specifies the value, or regular expression, that is going to replace by the new value.
    • newvalue: This parameter is required. It specifies the value to replace the search value with.

    Return value:
    Returns a new string where the defines value(s) has been replaced by the new value.

Example 1: This example format the date in dd/mm/yyyy by checking both date and month, If they are not in 2 digits the zero is added to make them 2 digits.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | How to get current formatted date dd/mm/yyyy.
    </title>
</head>
  
<body style="text-align:center;"
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;">
    </p>
    <button onclick="gfg_Run()">
        get Date
    </button>
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 20px; 
              font-weight: bold;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var today = new Date();
        el_up.innerHTML = today;
        var dd = today.getDate();
        var mm = today.getMonth() + 1;
  
        var yyyy = today.getFullYear();
        if (dd < 10) {
            dd = '0' + dd;
        }
        if (mm < 10) {
            mm = '0' + mm;
        }
        var today = dd + '/' + mm + '/' + yyyy;
  
        function gfg_Run() {
            el_down.innerHTML = today;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example first slice the date part from the date object and then format the date in dd/mm/yyyy.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | How to get current formatted date dd/mm/yyyy.
    </title>
</head>
  
<body style="text-align:center;"
      id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <button onclick="gfg_Run()">
        get Date
    </button>
    <p id="GFG_DOWN"
       style="color:green; 
              font-size: 20px; 
              font-weight: bold;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var today = new Date();
        el_up.innerHTML = today;
  
        function gfg_Run() {
            var date = today.toJSON().slice(0, 10);
            var nDate = date.slice(8, 10) + '/' 
                       + date.slice(5, 7) + '/' 
                       + date.slice(0, 4);
            el_down.innerHTML = nDate;
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


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.