ReactJS - Date Picker: A Beginner's Guide

Hello, aspiring developers! Today, we're going to embark on an exciting journey into the world of ReactJS Date Pickers. Don't worry if you've never coded before – I'll be your friendly guide, explaining everything step by step. By the end of this tutorial, you'll be able to add a nifty date picker to your React applications. Let's dive in!

What is a Date Picker?

Before we start coding, let's understand what a date picker is. Imagine you're booking a flight online. You need to select your travel date, right? That calendar that pops up allowing you to choose a date? That's a date picker! It's a user interface element that makes selecting dates easy and intuitive.

Why Use a Date Picker in React?

React is all about creating interactive user interfaces, and a date picker is a perfect example of this. It enhances user experience by providing a visual calendar for date selection, reducing errors and making your app more user-friendly.

Getting Started with React Date Picker

To use a date picker in React, we'll be using a popular library called react-datepicker. This library provides a customizable component that we can easily integrate into our React applications.

Step 1: Setting Up Your React Project

First, let's create a new React project. If you already have one, you can skip this step.

npx create-react-app my-datepicker-app
cd my-datepicker-app

This command creates a new React application named "my-datepicker-app" and moves you into the project directory.

Step 2: Installing the Date Picker Library

Now, let's install the react-datepicker library:

npm install react-datepicker

This command adds the date picker library to your project.

Applying the Date Picker Component

Now comes the fun part – actually using the date picker in our app!

Step 1: Importing the Necessary Modules

Open your src/App.js file and add these import statements at the top:

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

Here's what each line does:

• We import useState from React to manage our component's state.
• We import the DatePicker component from the library we installed.
• We import the CSS file to style our date picker.

Step 2: Creating a Functional Component

Let's create a functional component that uses our date picker:

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="App">
      <h1>My Awesome Date Picker</h1>
      <DatePicker
        selected={selectedDate}
        onChange={date => setSelectedDate(date)}
        dateFormat="dd/MM/yyyy"
        placeholderText="Select a date"
      />
      <p>Selected date: {selectedDate ? selectedDate.toDateString() : "No date selected"}</p>
    </div>
  );
}

Let's break this down:

1. We use useState to create a state variable selectedDate and a function setSelectedDate to update it.
2. We render a DatePicker component with several props:
   • selected: The currently selected date
   • onChange: A function to call when a new date is selected
   • dateFormat: How we want the date to be displayed
   • placeholderText: What to show when no date is selected
3. We display the selected date below the picker, or a message if no date is selected.

Step 3: Customizing the Date Picker

One of the great things about react-datepicker is how customizable it is. Let's look at some ways we can modify our date picker:

function App() {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="App">
      <h1>My Customized Date Picker</h1>
      <DatePicker
        selected={selectedDate}
        onChange={date => setSelectedDate(date)}
        dateFormat="dd/MM/yyyy"
        minDate={new Date()}
        filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
        showYearDropdown
        scrollableYearDropdown
      />
    </div>
  );
}

In this example:

• minDate={new Date()} ensures that past dates can't be selected.
• filterDate is used to disable weekends (Saturday and Sunday).
• showYearDropdown and scrollableYearDropdown add a dropdown to quickly change years.

Date Picker Methods

The react-datepicker library provides several useful methods. Here's a table summarizing some of them:

Method	Description
setOpen(boolean)	Manually set the opened state of the calendar.
setFocus()	Manually set focus on the input.
handleCalendarClose()	Manually close the calendar.
handleCalendarOpen()	Manually open the calendar.

You can use these methods by creating a ref to the DatePicker component:

const datePickerRef = useRef(null);

// Later in your JSX
<DatePicker ref={datePickerRef} />

// To use a method
datePickerRef.current.setOpen(true);

Conclusion

Congratulations! You've just learned how to implement and customize a date picker in React. This powerful tool will make date selection in your apps a breeze for users.

Remember, the key to mastering React (or any programming concept) is practice. Try adding date pickers to your projects, experiment with different props, and don't be afraid to dive into the documentation for more advanced features.

Happy coding, and may your dates always be perfectly picked! ?️?‍?

Credits: Image by storyset