How to get current formatted date dd/mm/yyyy in Javascript and append it to an input?
Last Updated :
01 May, 2025
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.
Approaches
Below are the following approaches by which we can get the JavaScript formatted date dd/mm/yyyy in Javascript and append it to an input:
1. 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: In this example we displays the current date using JavaScript’s toLocaleDateString() method in “en-GB” format and sets the date input field to today’s date. The date is shown in a specific format and pre-filled in the input field.
HTML
<html>
<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:
-method.png)
Using toLocaleDateString() method Example output
2. 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
<html>
<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:
-method.png)
Splicing the string from the toLocalISOString() method Example Output
3. 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
<html>
<head>
<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 Moment.js Library Example Output
Why Use These Methods?
- Simplicity: These methods make it easy to work with dates without manually formatting them.
- Localization: The
toLocaleDateString() method allows you to adapt the date format to different locales, which is especially useful for international applications. - Efficiency: String manipulation methods like
toISOString() and libraries like Moment.js simplify date manipulation, making your code more concise and maintainable. - Flexibility: Moment.js provides greater flexibility and additional features for more complex date operations, such as timezone conversion, relative time, and parsing dates.
Best Practices for Handling Dates in JavaScript
- Always Validate Dates: When working with user input or external data, validate the date format to ensure it’s correct.
- Use Libraries for Complex Operations: For complex date manipulations (like timezone conversions), use libraries such as Moment.js or Day.js.
- Consider Browser Compatibility: While
toLocaleDateString() is widely supported, older browsers may not fully support all locales. In such cases, fallback methods might be necessary. - Avoid Date Format Issues: If your application works with multiple locales, ensure that date formats are consistent across different parts of your app.
Conclusion
In this article, we explored multiple ways to obtain the current date in the DD/MM/YYYY format using JavaScript. From using the built-in Date object methods like toLocaleDateString() and toISOString(), to leveraging the Moment.js library, each method offers a different approach depending on your project needs.
Similar Reads
How to get current formatted date dd/mm/yyyy in JavaScript ?
Here are different ways to get the current date in dd/mm/yyyy format. 1. Using Native JavaScript MethodsJavaScript's built-in Date object provides various methods to work with dates and times. You can extract individual components like day, month, and year to format the date manually. [GFGTABS] Java
2 min read
How to format current date in MM/DD/YYYY HH:MM:SS format using JavaScript ?
Given a date and the task is to format the current date in MM/DD/YYYY HH:MM:SS format. Here are a few of the most techniques discussed with the help of JavaScript. Approach 1: Store the current date in variable.Use the string concatenation technique to insert / and : in between the month-day and day
2 min read
How to extract date from a string in dd-mmm-yyyy format in JavaScript ?
In this article, we will see how to extract date from a given string of format "dd-mmm-yyyy" in JavaScript. We have a string, and we want to extract the date format "dd-mmm-yyyy" from the string. Example: // Stringstr = "India got freedom on 15-Aug-1947"// Extracted date from given string in // "dd-
2 min read
How To Format JavaScript Date as yyyy-mm-dd?
We use JavaScript built-in help methods from the Date class that help us to create a formatted version of the current date in the form of yyyy-mm-dd. These are the approaches used to format JavaScript date as yyyy-mm-dd. Table of Content Using the ISO String Method USing JavaScript Method1. Using th
2 min read
How to get Month and Date of JavaScript in two digit format ?
To get the Month and Date of JavaScript in two-digit format, we have multiple approaches. In this article, we are going to learn how to get the Month and Date of JavaScript in a two-digit format. Below are the approaches used to get the Month and Date of JavaScript in two-digit format: Table of Cont
3 min read
How to store all dates in an array present in between given two dates in JavaScript ?
Given two dates the task is to get the array of dates between the two given dates using JavaScript. Below are the following approaches: Table of Content Using push() MethodUsing for loop and push() MethodUsing concat methodApproach 1: Using push() MethodSelect the first and last date and store it in
3 min read
How to get tomorrow's date in a string format in JavaScript ?
In this article, we will see how to print tomorrow's date in string representation using JavaScript. To achieve this, we use the Date object and create an instance of it. After that by using the setDate() method, we increase one date to the present date. Now by using the getDate() method you will ge
2 min read
How to get the current date in JavaScript ?
The Date() object is used to access the current date in JavaScript. To get the current date in string format, we can use toDateString() method. The date.toDateString() method converts the given date object into the date portion into a string. Syntax dateObj.toDateString()[GFGTABS] JavaScript // Crea
2 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.
3 min read
How to get Day Month and Year from Date Object in JavaScript ?
We have given the Date object and the task is to extract the Day, Month, and Year from the Date object and print it using JavaScript. Below is an example for better understanding. Example:Input: Date ObjectOutput: Day: 26 Month: 11 Year: 2023To extract Day, Month, and Year from Date Object, we have
3 min read