Introduction: Why Use a Date Picker in React?

Handling date input in modern web applications is crucial—from booking apps and forms to scheduling and analytics dashboards. But dealing with raw <input type="date"> elements is clunky, browser-dependent, and lacks advanced customization.

That’s where the React Date Picker comes in. It provides a consistent, user-friendly, and customizable date selection UI built specifically for React.

In this article, you’ll learn how to:

• Integrate react-datepicker, the most popular date picker library

• Customize the date picker behavior and styling

• Handle selected dates in React state

• Avoid common pitfalls when dealing with dates and forms

Let’s get started!

Installing a React Date Picker Library

Step 1: Choose the Right Date Picker

The most widely used library is react-datepicker, maintained and battle-tested by the community.

npm install react-datepicker
npm install date-fns  # peer dependency for date manipulation

Step 2: Import Styles

You’ll need the built-in CSS styles for the calendar to render correctly.

import "react-datepicker/dist/react-datepicker.css";

Basic Usage of react-datepicker

Let’s see how to set up a basic date picker with state handling.

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

function MyDatePicker() {
  // Step 1: Create local state to hold the selected date
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div>
      <label>Select a date:</label>
      <DatePicker
        selected={startDate}        // Step 2: Pass selected date
        onChange={(date) => setStartDate(date)} // Step 3: Update state
      />
    </div>
  );
}

export default MyDatePicker;

✅ This renders a fully functional calendar with a clean UI.

Common Customizations

1. Date Format

Use the dateFormat prop to display the date in a specific format:

<DatePicker dateFormat="dd/MM/yyyy" />

2. Enable/Disable Dates

Disable past dates:

<DatePicker minDate={new Date()} />

Disable weekends:

<DatePicker
  filterDate={(date) => date.getDay() !== 0 && date.getDay() !== 6}
/>

3. Select Date Range

<DatePicker
  selectsRange
  startDate={startDate}
  endDate={endDate}
  onChange={(dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  }}
  isClearable
/>

⏰ 4. Add Time Selection

<DatePicker
  showTimeSelect
  timeFormat="HH:mm"
  timeIntervals={15}
  dateFormat="Pp"
  selected={startDate}
  onChange={(date) => setStartDate(date)}
/>

✅ Full Functional Code Example

Here’s a full working example that includes all the major features:

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

const FullDatePickerExample = () => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(null);

  return (
    <div style={{ padding: "20px" }}>
      <h2>???? Pick a Date Range with Time</h2>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        showTimeSelect
        timeIntervals={30}
        timeCaption="Time"
        dateFormat="MMMM d, yyyy h:mm aa"
        minDate={new Date()}
      />

      <hr />

      <h3>Select a Date Range:</h3>
      <DatePicker
        selectsRange
        startDate={startDate}
        endDate={endDate}
        onChange={(dates) => {
          const [start, end] = dates;
          setStartDate(start);
          setEndDate(end);
        }}
        isClearable
      />
    </div>
  );
};

export default FullDatePickerExample;

Tips & Common Pitfalls

✅ Tips:

• Use date-fns or dayjs for formatting and manipulating dates.

• Combine react-hook-form with react-datepicker for advanced form handling.

• Use isClearable to allow users to reset the date.

• Always test your component across time zones.

⚠️ Common Pitfalls:

• Forgetting to import the CSS will result in a broken calendar UI.

• Using new Date(string) may behave differently in different browsers. Prefer ISO strings or use date-fns/parse.

• When passing dates via props, ensure they are valid Date objects—not strings.

Library Comparison Table (Optional)

Summary & Best Practices

• The react-datepicker library makes it simple to add date and time pickers in React.

• You can customize formats, filter dates, add time selection, and support ranges easily.

• Watch out for timezone-related issues and always validate the Date objects.

• Use clear labels and placeholders for better accessibility and UX.