Input type date in React

If you're a developer who's just ventured into the mystical land of React, you might feel like Alice tumbling down the rabbit hole. And, of course, there's nothing like the Mad Hatter's tea party than dealing with dates in JavaScript! 😂

But worry not, my friends! In this article, I'll be your Cheshire Cat, leading you through the twists and turns of handling date inputs in React. So, let's leap into our Wonderland of code without further ado!

The Simple Date Picker Component

Our journey begins with a simple but fundamental character in our tale – the date picker component. Here, we will use a controlled component to manage the state of our date input. In other words, Alice, hold tight to that 'drink me' bottle of yours. Things are about to get 'curiouser and curiouser'.

import React, { useState } from 'react';

function DatePicker() {
  const [selectedDate, setSelectedDate] = useState('');

  const handleDateChange = (event) => {
    setSelectedDate(event.target.value);
  };

  return (
    <input type="date" value={selectedDate} onChange={handleDateChange} />
  );
}

export default DatePicker;

In this segment, we've created a date input component that stores the selected date in its state. Every time a user selects a new date, handleDateChange updates the state with the new value.

Formatting the Date

"But I don't want it in yyyy-mm-dd format!" I hear you cry. Fear not! Just as Alice can shape-shift in Wonderland, we can format our date however we please.

Consider the moment.js library your 'eat me' cake, empowering you to transform your date size (or format) at will. 🎂

learn more about moment.js

Let's see how to format our selected date to MM/DD/YYYY:

function DatePicker() {
  const [selectedDate, setSelectedDate] = useState('');

  const handleDateChange = (event) => {
    const formattedDate = moment(event.target.value).format('MM/DD/YYYY');
    setSelectedDate(formattedDate);
  };

  return (
    <input type="date" value={selectedDate} onChange={handleDateChange} />
  );
}

export default DatePicker;

In this snippet, we've introduced the moment library to format the date from the default "YYYY-MM-DD" to "MM/DD/YYYY". 

And voila! Our date input now displays in the format of our choice.

Prepopulating the Date

But what if the Queen of Hearts demands the date input be pre-populated with today's date? Well, we certainly don't want "Off with their heads!", do we? So, let's comply:

import React, { useState } from 'react';
import moment from 'moment';

function DatePicker() {
  const today = moment().format('YYYY-MM-DD');
  const [selectedDate, setSelectedDate] = useState(today);

  const handleDateChange = (event) => {
    const formattedDate = moment(event.target.value).format('MM/DD/YYYY');
    setSelectedDate(formattedDate);
  };

  return (
    <input type="date" value={selectedDate} onChange={handleDateChange} />
  );
}

export default DatePicker;

In this piece of magic, we set our selectedDate state initially to today's date, keeping our queen content and our heads firmly on our shoulders!

Well, there you have it! You've survived a trip to Wonderland and returned with the knowledge of handling date inputs in React. No rabbit holes, mad hatters, or demanding queens could stand in your way!

Remember, my React explorers, just like Alice discovered: "I can't go back to yesterday because I was a different person then." Embrace the challenges and complexities of learning new things, and never stop coding.

And finally, don't be a stranger to the 'React' Wonderland; there are still many more adventures to be had, many more components to explore, and many more states to manage. 

Until our next adventure, happy coding!