Work with React Date Picker Component

When I build booking forms, employee schedules, or event dashboards, users need an easy way to select dates. A React Date Picker component solves this problem by providing a clear calendar interface instead of forcing users to type dates manually.

In this guide, I will build a practical React Date Picker component for an appointment scheduling dashboard and show how to manage selected dates, validation, and user interaction.

What Is a React Date Picker Component?

A React Date Picker component lets users select a date through an interactive calendar or date input.

For example, imagine Emily Carter from Seattle, Washington, booking a product consultation. Instead of typing:

09/15/2026

she can click a date input and select September 15, 2026.

A React component is a reusable JavaScript function that returns UI. We can build the Date Picker as a reusable component and pass data between components using props.

If you are new to React, start by learning how to set up a ReactJS environment and create your first React app.

Create the React Date Picker Component

For this example, we will build a simple appointment scheduling application.

Our project structure looks like this:

src/
│
├── App.jsx
├── DatePicker.jsx
└── App.css

We will create:

1. A selected date using state.
2. A reusable React Date Picker component.
3. Date validation.
4. A booking summary.
5. A clear button.

Step 1: Create the Main Application

Create the following code inside App.jsx.

App.jsx

import { useState } from "react";
import DatePicker from "./DatePicker";
import "./App.css";

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

  return (
    <div className="app">
      <div className="booking-card">
        <h1>Schedule a Consultation</h1>

        <p>
          Select an appointment date for Emily Carter from Seattle,
          Washington.
        </p>

        <DatePicker
          selectedDate={selectedDate}
          setSelectedDate={setSelectedDate}
        />

        {selectedDate && (
          <div className="booking-summary">
            <h2>Appointment Selected</h2>

            <p>
              Date: <strong>{selectedDate}</strong>
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

Here, state stores information that can change while a user interacts with the component.

The useState hook creates the selectedDate state value. When the user chooses a date, setSelectedDate updates the state.

We pass both values to the Date Picker using props. You can also learn more about React props.

Sample Output

The browser displays:

Schedule a Consultation

Select an appointment date for Emily Carter from Seattle, Washington.

Select Appointment Date
[ mm/dd/yyyy ]

After selecting September 15, 2026:

Appointment Selected
Date: 2026-09-15

Step 2: Build the React Date Picker Component

Now create DatePicker.jsx.

DatePicker.jsx

function DatePicker({
  selectedDate,
  setSelectedDate
}) {
  return (
    <div className="date-picker">
      <label htmlFor="appointmentDate">
        Select Appointment Date
      </label>

      <input
        id="appointmentDate"
        type="date"
        value={selectedDate}
        min="2026-09-01"
        onChange={(event) =>
          setSelectedDate(event.target.value)
        }
      />
    </div>
  );
}

export default DatePicker;

The type="date" input provides the browser’s built-in date picker.

The value property connects the input with React state. The onChange property is an event handler, which runs when the user selects a new date.

The min property prevents users from selecting dates before September 1, 2026.

Sample Output

Initially:

Select Appointment Date

[ mm/dd/yyyy ]

After selecting September 15:

Select Appointment Date

[ 09/15/2026 ]

The appointment summary immediately updates below the input.

Step 3: Add Styling

Create the following CSS inside App.css.

App.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f7fb;
}

.app {
  max-width: 700px;
  margin: 60px auto;
  padding: 20px;
}

.booking-card {
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.booking-card h1 {
  margin-top: 0;
}

.date-picker {
  margin-top: 25px;
}

.date-picker label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.date-picker input {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.date-picker input:focus {
  outline: 3px solid #bfdbfe;
  border-color: #2563eb;
}

.booking-summary {
  margin-top: 25px;
  padding: 20px;
  background: #f0fdf4;
  border-radius: 8px;
}

This CSS creates a simple appointment card and makes the date input easier to use. The :focus style is important for keyboard users because it provides a clear visual indicator.

Sample Output

The application displays:

┌──────────────────────────────────────┐
│ Schedule a Consultation              │
│                                      │
│ Select Appointment Date              │
│ [ 16/10/2026                      ]  │
│                                      │
│ Appointment Selected                 │
│ Date: 2026-10-16                    │
└──────────────────────────────────────┘

You can see the output in the screenshot below.

How the React Date Picker Component Works

The main flow is straightforward:

User selects date
        ↓
onChange event runs
        ↓
setSelectedDate updates state
        ↓
React renders the component again
        ↓
Booking summary displays the new date

React automatically updates the UI when the state changes.

Pro Tip: I usually store dates in a consistent format and keep validation close to the input. This prevents date formatting problems when the application later sends data to an API.

Add a Clear Date Button

Users may select the wrong appointment date. Let’s add a button that clears the selected value.

Update DatePicker.jsx.

DatePicker.jsx

function DatePicker({
  selectedDate,
  setSelectedDate
}) {
  const clearDate = () => {
    setSelectedDate("");
  };

  return (
    <div className="date-picker">
      <label htmlFor="appointmentDate">
        Select Appointment Date
      </label>

      <input
        id="appointmentDate"
        type="date"
        value={selectedDate}
        min="2026-09-01"
        onChange={(event) =>
          setSelectedDate(event.target.value)
        }
      />

      {selectedDate && (
        <button
          type="button"
          className="clear-button"
          onClick={clearDate}
        >
          Clear Date
        </button>
      )}
    </div>
  );
}

export default DatePicker;

Add this CSS to App.css.

.clear-button {
  margin-top: 12px;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background: #e2e8f0;
}

.clear-button:focus {
  outline: 3px solid #bfdbfe;
}

The clearDate function sets the state back to an empty string.

This is another example of an event handler. The function runs when the user clicks the button. You can learn more about handling events in React JS.

Sample Output

After selecting a date:

Select Appointment Date

[ 09/15/2026 ]

[ Clear Date ]

After clicking Clear Date:

Select Appointment Date

[ mm/dd/yyyy ]

The appointment summary also disappears.

Add Date Validation

In a real booking application, you may need to validate the selected date before submitting the appointment.

Update App.jsx.

App.jsx

import { useState } from "react";
import DatePicker from "./DatePicker";
import "./App.css";

function App() {
  const [selectedDate, setSelectedDate] = useState("");
  const [message, setMessage] = useState("");

  const bookAppointment = () => {
    if (!selectedDate) {
      setMessage(
        "Please select an appointment date."
      );

      return;
    }

    setMessage(
      `Appointment booked for ${selectedDate}.`
    );
  };

  return (
    <div className="app">
      <div className="booking-card">
        <h1>Schedule a Consultation</h1>

        <p>
          Select an appointment date for Emily Carter
          from Seattle, Washington.
        </p>

        <DatePicker
          selectedDate={selectedDate}
          setSelectedDate={setSelectedDate}
        />

        <button
          type="button"
          className="book-button"
          onClick={bookAppointment}
        >
          Book Appointment
        </button>

        {message && (
          <p className="message">
            {message}
          </p>
        )}
      </div>
    </div>
  );
}

export default App;

Add the following CSS.

.book-button {
  margin-top: 20px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: white;
}

.book-button:focus {
  outline: 3px solid #93c5fd;
}

.message {
  margin-top: 20px;
  font-weight: bold;
}

The bookAppointment function checks whether the user selected a date. If no date exists, the application displays an error message. Otherwise, it displays a booking confirmation.

For more form-related scenarios, see form validation in React JS.

Sample Output

Before selecting a date:

[ Book Appointment ]

Please select an appointment date.

After selecting September 15, 2026:

[ Book Appointment ]

Appointment booked for 2026-09-15.

Create a Reusable React Date Picker Component

The biggest advantage of creating a separate component is reusability.

You can use the same Date Picker for:

• Appointment scheduling
• Event registration
• Employee onboarding
• Product delivery dates
• Hotel reservations
• Project deadlines

For example:

<DatePicker
  selectedDate={startDate}
  setSelectedDate={setStartDate}
/>

<DatePicker
  selectedDate={endDate}
  setSelectedDate={setEndDate}
/>

The same component can manage different state values through props. This approach keeps your React application organized as it grows.

React Date Picker Component with Multiple Dates

A real scheduling dashboard may require both a start date and an end date.

App.jsx

import { useState } from "react";
import DatePicker from "./DatePicker";
import "./App.css";

function App() {
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  return (
    <div className="app">
      <div className="booking-card">
        <h1>Project Schedule</h1>

        <p>
          Create a project schedule for a development
          team in Austin, Texas.
        </p>

        <DatePicker
          selectedDate={startDate}
          setSelectedDate={setStartDate}
        />

        <DatePicker
          selectedDate={endDate}
          setSelectedDate={setEndDate}
        />

        {startDate && endDate && (
          <div className="booking-summary">
            <h2>Project Dates</h2>

            <p>
              Start Date: {startDate}
            </p>

            <p>
              End Date: {endDate}
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

This example creates two independent Date Picker instances. Each component receives its own state and state update function.

Sample Output

Project Schedule

Select Start Date
[ 09/10/2026 ]

Select End Date
[ 09/25/2026 ]

Project Dates

Start Date: 2026-09-10
End Date: 2026-09-25

You can see the output in the screenshot below.

Things to Keep in Mind

• Use controlled inputs: Connect the selected date to React state when other parts of the application need the value.
• Validate date ranges: Check start and end dates before submitting scheduling or booking data.
• Keep accessibility in mind: Always use a proper <label> and provide visible keyboard focus styles.
• Use a consistent date format: Decide how your application stores dates before sending them to an API or database.
• Avoid unnecessary state: Store only the selected date and calculate derived values when needed.
• Consider time zones: Date-only values and date-time values require different handling in production applications.

Frequently Asked Questions

A React Date Picker component becomes easy to manage when you combine a reusable component with controlled state and clear validation. Start with the native date input, then add custom calendar behavior, API integration, or date ranges when your application needs them.

You May Also Like

• How to Set Up ReactJS and Create Your First React App
• Understanding Props in React JS
• How to Handle Events in React JS
• How to Reset a Form in React JS
• Create a Custom Input Component in React

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/