How to get current formatted date dd/mm/yyyy in Javascript and append it to an input?

Last Updated : 12 Mar, 2024

The current date in “dd/mm/yyyy” format represents the day, month, and year according to the Gregorian calendar,To obtain the current date in “dd/mm/yyyy” format using JavaScript, utilize the `Date` object methods to extract day, month, and year components, format them accordingly, and then append the formatted date to an input field.

Here, we have a basic HTML code that showcases various approaches to obtain the current date in “dd/mm/yyyy” format using JavaScript. Additionally, it demonstrates appending the obtained date to an input field.

HTML

<!DOCTYPE html>
<html>
    <head> </head>

    <body>
        <b>
            How to get current formatted date
            dd/mm/yyyy in Javascript and append it
            to an input?
        </b>

        <p>
            Current Date is:
            <span class="currDate"></span>
        </p>

        <p>
            Please select the date to start the
            course:
            <input type="date" id="dateInput" />
        </p>
    </body>
</html>

Examples of getting current formatted in Javascript and append it to an input

Using toLocaleDateString() method

The toLocaleDateString() method formats the date based on specified locales and options. To display ‘dd/mm/yyyy’, set the locale to ‘en-GB’. Use the `valueAsDate` property to assign the current date as a `Date` object to an input field.

Syntax:

new Date().toLocaleDateString('en-GB')

Example:

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Using toLocaleDateString() method:
        </title>
    </head>

    <body>
        <p>
            Current Date is:
            <span class="currDate"></span>
        </p>

        <p>
            Please select the date to start the
            course:
            <input type="date" id="dateInput" />
        </p>

        <script type="text/javascript">
            let currDate =
                new Date().toLocaleDateString(
                    "en-GB"
                );

            let inputDate = new Date();

            document.querySelector(
                ".currDate"
            ).textContent = currDate;

            document.querySelector(
                "#dateInput"
            ).valueAsDate = inputDate;
        </script>
    </body>
</html>

Output:

Using toLocaleDateString() method Example output

Splicing the string from the toLocalISOString() method

The date from the toLocalISOString() method is extracted by slicing the string, splitting it, reversing, and joining to ‘dd/mm/yyyy’ format. It’s then set to an input using valueAsDate with a new Date() object.

Syntax:

new Date().toISOString().slice(0, 10).split('-').reverse().join('/')

Example: In this example we Display current date in “dd/mm/yyyy” format using toLocaleDateString() method, and append it to an input field in a basic HTML code.

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Splicing the string from the toLocalISOString() method
        </title>
    </head>

    <body>

        <p>
            Current Date is:
            <span class="currDate"></span>
        </p>

        <p>
            Please select the date to start the
            course:
            <input type="date" id="dateInput" />
        </p>

        <script type="text/javascript">
            let currDate = new Date()
                .toISOString()
                .slice(0, 10)
                .split("-")
                .reverse()
                .join("/");

            let inputDate = new Date();

            document.querySelector(
                ".currDate"
            ).textContent = currDate;
            document.querySelector(
                "#dateInput"
            ).valueAsDate = inputDate;
        </script>
    </body>
</html>

Output:

Splicing the string from the toLocalISOString() method Example Output

Using Moment.js Library

Moment.js library to obtain the current date in “dd/mm/yyyy” format and append it to an input field. Moment.js simplifies date manipulation and formatting tasks in JavaScript applications

Syntax

<script src="https://momentjs.com/downloads/moment.min.js"></script>

Example: In this example we demonstrates using Moment.js library to obtain the current date in “dd/mm/yyyy” format and append it to an input field. Moment.js simplifies date manipulation and formatting tasks in JavaScript applications.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
            Using Moment.js Library
        </title>
        <script src=
"https://momentjs.com/downloads/moment.min.js">
       </script>
    </head>

    <body>

        <p>
            Current Date is:
            <span class="currDate"></span>
        </p>

        <p>
            Please select the date to start the
            course:
            <input type="date" id="dateInput" />
        </p>

        <script type="text/javascript">
            let currDate =
                moment().format("DD/MM/YYYY");
            let inputDate = moment();

            document.querySelector(
                ".currDate"
            ).textContent = currDate;
            document.querySelector(
                "#dateInput"
            ).valueAsDate = inputDate.toDate();
        </script>
    </body>
</html>

Output: