Open In App

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

Last Updated : 12 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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

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

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:

Using-Momentjs-Library

Using Moment.js Library Example Output


Similar Reads

How to get current formatted date dd/mm/yyyy in JavaScript ?
In this article, we will see how to get the format current date in dd/mm/yyyy format by using JavaScript. We're going to discuss a few methods. The first few methods to know These are the methods that can be used in solving this problem: Table of Content JavaScript getDate() MethodJavaScript getFullYear() MethodJavaScript getMonth() MethodJavaScrip
3 min read
How to validate if input date (end date) in input field must be after a given date (start date) using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In certain cases, we want the user to type a date that must come after some given date(Ex. 'end date' must be after 'start date')
5 min read
How to validate if input date (start date) in input field must be before a given date (end date) using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In certain cases, we want the user to type a date that must come before some given date (Ex: 'start date' must come before 'end da
5 min read
How to get the first and last date of current month using JavaScript ?
Given a month and the task is to determine the first and last day of that month in proper format using JavaScript. JavaScript getDate() Method: This method returns the day of the month (from 1 to 31) for the defined date. Syntax: Date.getDate() Parameters: This method does not accept any parameters. Return value: It returns a number from 1 to 31, r
3 min read
How to get the current date in JavaScript ?
In this article, we will see how to get the current date using the built-in methods in JavaScript &amp; will see their implementation through the examples. There are 2 methods to perform this task: Using Date().toDateString() MethodUsing their respective method for fetching day, month, and year.There are several other ways to perform this task but
3 min read
How to get the current date and time in seconds ?
In this article, we will learn how to get the current date &amp; time in seconds using JavaScript build-in methods. We will perform it in 2 ways: Using Date.now() methodUsing new Date.getTime() methodMethod 1: Using Date.now() MethodThe Date.now() method returns the number of milliseconds elapsed since January 1, 1970, 00:00:00 UTC. This is known a
2 min read
How to get the current Date and Time in PHP ?
The purpose of the article is to get the current Date and Time in PHP. It is performed by using a simple in-built PHP function date(). The Date is an inbuilt function used to format the timestamp. The computer stores date and time in UNIX timestamp. This time is measured as a number of seconds since Jan 1, 1970. As this is difficult for humans to r
2 min read
How to get current date and time in firebase using ReactJS ?
This article provides a detailed walkthrough on obtaining the current date and time in a Firebase environment using ReactJS. Readers will gain insights into the implementation process, enabling date and time functionalities into their React projects powered by Firebase. Prerequisites:Node JS or NPMReact JSFirebaseSteps to Create React Application A
2 min read
How to check the input date is equal to today's date or not using JavaScript ?
Given a date object and the task is to determine whether the given date is the same as today's date or not with the help of JavaScript. There are two well-famous approaches are discussed here. Approach 1: Get the input date from user (var inpDate) and the today's date by new Date(). Now, use .setHours() method on both dates by passing parameters of
3 min read
React.js Blueprint Date Input Date Formatting
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications. In this article, we'll discuss React.js Blueprint Date Input Date formatting. The Date Input component is a type of InputGroup that allows the users to pick the date as per c
3 min read
Article Tags :