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

Ensuring consistent date format during form submissions

Consistency is crucial when dealing with date formatting. For your input field to always receive current date in the specified format dd/mm/yyyy upon each form submission, you can implement the following approach:

document.querySelector('form').addEventListener('submit', function() {
  let d = new Date(), dateStr = [d.getDate(), d.getMonth() + 1, d.getFullYear()].map(n => n < 10 ? '0' + n : '' + n).join('/');
  // Time-travel isn't invented yet, updating the date again
  document.querySelector('input').value = dateStr;
});


Dealing with single-digit days and months

We've seen how map can be utilized to format single-digit dates. Now let's explore alternative approaches:

let d = new Date();
let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate(); // Adding '0' for calendar's fashion sense
let month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1; // '0' – All in good time
document.querySelector('input').value = `${day}/${month}/${d.getFullYear()}`;


Using available libraries judiciously

Libraries such as Moment.js can be handy for dealing with dates, but they can also add unnecessary overhead to your project. Utilize them wisely, only when necessary.

Additional techniques to maneuver the Date object

The key to becoming a proficient coder is having the ability to adapt your solution based on a variety of scenarios. Let's explore some more techniques:

Using toLocaleDateString

This method allows you to format the date according to specific locale and options:

let options = { year: 'numeric', month: '2-digit', day: '2-digit' };
let dateStr = new Date().toLocaleDateString('en-GB', options); // en-GB for British style
document.querySelector('input').value = dateStr;


Quick date formatting

If you're a fan of concise code and your environment supports ES5 or higher, here's another way to get your date formatted in dd/mm/yyyy:

document.querySelector('input').value = new Date().toJSON().slice(0,10).split('-').reverse().join('/');
// Turning back time... The Doctor would be proud


Beware of compatibility issues with older browsers.

Integration with jQuery and moment.js

If you're using jQuery and moment.js, date formatting can be as simple as:

$('input').val(moment().format('DD/MM/YYYY')); // moment.js and jQuery, better love story than Twilight


Remember to include both jQuery and moment.js in your project.