How to get current formatted date dd/mm/yyyy in Javascript and append it to an input?
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.
<!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:
<!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:
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.
<!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:
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.
<!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: