Set date in input type date

Achieving the 'Back to the Future' effect

Dreaming of setting the current date as the default value in your time machine? First, get today's date using JavaScript's Date object:

const today = new Date(); // We have today's date! No DeLorean needed.


Then format the date to match the timeless YYYY-MM-DD format:

const formattedDate = today.toISOString().substr(0, 10); // Time travel is real!
document.getElementById('dateInput').value = formattedDate;


Now, your webpage has its own time machine!

Adding the finishing touches

Ensuring leading zeros for MM and DD

Just like James Bond, months and days love double digits. Use padStart() to make sure there are no single agents:

// Assembling the time hideout - all agents in position!
const month = (today.getMonth() + 1).toString().padStart(2, '0');
const day = today.getDate().toString().padStart(2, '0');
const year = today.getFullYear();
document.getElementById('dateInput').value = `${year}-${month}-${day}`;


Weaving the date with ISO and valueAsDate

toISOString crafts the date to ISO standards, while valueAsDate ensures zero conversions from date to string:

const dateElement = document.getElementById('dateInput');
// Spinning time into a string!
dateElement.value = new Date().toISOString().split('T')[0]; 
// Or keeping date pure and simple!
dateElement.valueAsDate = new Date(); 


Battling the browser kaijus

In the world of web, different browsers can mutate <input type="date"> differently. Always have your kaiju-battling plan ready:

🕵️‍♀️ Your spy on the inside: *Can I use...* 
🔬 Your research buddy: `toISOString().substr(0, 10)` method is generally safe. 

The user strikes back — Dealing with user inputs

Setting boundaries for time travelers

While your users might have their own DeLoreans, you want to restrict the range of dates they can travel to. Use the max and min attributes to hedge space-time continuum paradoxes:

<input type="date" id="dateInput" min="2023-01-01" max="2023-12-31">


Cocking an ear to the changes

Maybe your users are more of TARDIS drivers and change the date on a whim. Let's listen for the Wibbly-Wobbly, Timey-Wimey... stuff:

document.getElementById('dateInput').addEventListener('change', (event) => {
  console.log('Time has changed:', event.target.value); // I wear a Stetson now. Stetsons are cool.
});


Gently nudging the wobbly hands of time

Some of your users might get a bit overzealous with the TARDIS and end up with impossibilities and paradoxes. Let's handle those wobbly things gracefully:

const dateInput = document.getElementById('dateInput');
dateInput.addEventListener('change', () => {
  if (isNaN(new Date(dateInput.value).getTime())) {
    alert('Awesome but impossible time jump, try again.'); // Timey-wimey detector. Ding when there's stuff!
    // And on bad stuff, do something!
    dateInput.value = new Date().toISOString().split('T')[0];
  }
});
