React Date Picker

by
Previous
Next

What Is Date Picker In React?

Date picker is a component that provide users to select date from calendar popup instead of typing it manually. it is use to collect date input in a clean, error free and interactive way. you can use date picker components from react-datepicker, mui and antd libraries of react.

Why Use Date Pickers?

You will not have to type date in any specific format like (DD/MM/YYYY). we can easily click on calendar and choose a right date. this method prevent common mistakes such as invalid dates and incorrect formatting.

Date Picker useful in:

  • Booking systems (flights, hotels, events)
  • Scheduling apps (meetings, appointments)
  • Forms are needed birthdates, deadlines or filter by date

Setup react date picker In Your Project

First of all you need react date picker libraries in your projects:

Install react-datepicker

Use this Command:

npm install react-datepicker

React-datepicker require styling, you can also import its CSS file. Install date-fns (a popular date library) for additional date options using this command:

npm install date-fns

How To Import Date Picker Component and CSS

Once the library is installed, import the react-datepicker component and CSS styles in your file. Use this following command for importing:

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

React Date Picker Example

Let’s start with a simple example of using a date picker component in React. In this example, we’ll initialize the date picker with a default date and use the useState hook to manage the selected date.

Let’s start with simple example of date picker in react. in this example we are use useState hook to manage selected date.

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

function MyBirthdaySelector() {
  const [myDate, setMyDate] = useState(null);

  return (
    <div style={{ padding: '20px' }}>
      <h3>Pick Your Birthday:</h3>
      <DatePicker
        selected={myDate}
        onChange={(day) => setMyDate(day)}
        placeholderText="Click to select your birth date"
        dateFormat="dd-MM-yyyy"
        showMonthDropdown
        showYearDropdown
        dropdownMode="select"
      />
    </div>
  );
}

export default MyBirthdaySelector;

Explanation of Date Picker Code:

  • useState(null): We start with no date selected, so we initialize myDate as null.
  • selected={myDate}: The date picker know which date is currently chosen from this state.
  • onChange={(day) => setMyDate(day)}: When user pick a date, we update our state with the new value using the setMyDate function.
  • placeholderText=”Click to select your birth date”: This hint text is showing before you picked any date.
  • Dropdowns for year/month: showMonthDropdown, showYearDropdown and dropdownMode=”select” this makes easy for users to select any year or month, which is helpful when picking past dates.
  • dateFormat=”dd-MM-yyyy”: Set the format of the displayed date (like 24-06-2025).

How To Customize Date Picker

The react-datepicker component provides various customization options for formats and date range.

There are multiple way to customize date:

  • Customizing Date Format
  • Set Limit of Date Range
  • Disable Specific Days (e.g., Weekends)
  • Adding Time Selection
  • Add a Custom Calendar Icon

1) Customizing Date Format

When you use date picker in React, it showing the date using your computer or browser’s language settings. For example, It is showing: 24/06/2025 In India, while in US it is showing: 06/24/2025.

But sometime you want to set your own date style – like showing month first, then day, then year.
So you can do this using a date format property. 

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  dateFormat="MM/dd/yyyy"
/>

2) Set Limit of Date Range

In a form or booking system, you don’t want to users select old past dates and too far future dates.

For example:

  • Users should select only today or future dates in hotel booking rooms.
  • Sometime you want to allow date between today and December 31, 2025.

We can control this range using:

  • minDate: sets the earliest date the user can choose.
  • maxDate: sets the latest date the user can choose.

How it works:

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  minDate={new Date()}               // disables all past dates
  maxDate={new Date(2025, 11, 31)}   // only allows dates until Dec 31, 2025
/>

Note:

  • new Date() means today’s date.
  • new Date(2025, 11, 31) means December 31, 2025. (Remember: 11 means December because months start from 0 in JavaScript.)

3) Disable Specific Days

Sometimes you want to block specific days in a calendar so users can not select that days.

For example:

  • A company are not work on weekends, so users should not pick Saturday or Sunday.
  • In this case, you can use filterDate, so you can control which dates are allowed.

How It is Works:

React DatePicker give us the filterDate property. this take a function and then checks each date.

If the function returns:

  • true = date is allowed
  • false = date is blocked

In JavaScript:

  • Sunday = 0
  • Monday = 1
  • …
  • Saturday = 6

Code Example:

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

This code disables both Sunday (0) and Saturday (6) – so users can only pick weekdays (Monday to Friday).

4) Time Selection In Date Picker

Date Picker select only date by default (like 10 July 2025). but sometimes we need to pick the time for booking appointments or schedule meetings.

Using showTimeSelect function for add the time:

<DatePicker
  selected={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  showTimeSelect
  dateFormat="MMMM d, yyyy h:mm aa"
/>

5) How To Add Custom Calendar Icon

We used normal input box for choosing the date, this code is trying to use a calendar icon (🗓️) that open the date picker when click on it.

import React, { useState, forwardRef } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { FaRegCalendarAlt } from 'react-icons/fa';

function CustomIconDatePicker() {
  const [myDate, setMyDate] = useState(null);

  // Custom input with icon
  const CalendarButton = forwardRef(({ value, onClick }, ref) => (
    <button
      onClick={onClick}
      ref={ref}
      style={{
        background: 'white',
        border: '1px solid #ccc',
        padding: '8px 12px',
        borderRadius: '4px',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
      }}
    >
      <FaRegCalendarAlt color="blue" />
      {value || "Pick a date"}
    </button>
  ));

  return (
    <div>
      <h3>Select a Date</h3>
      <DatePicker
        selected={myDate}
        onChange={(date) => setMyDate(date)}
        customInput={<CalendarButton />}
        dateFormat="MMMM d, yyyy"
      />
    </div>
  );
}

export default CustomIconDatePicker;
  • useState: Hold the selected date.
  • CalendarButton: A custom button with icon and label.
  • forwardRef: Required for custom inputs to work correctly with React DatePicker.
  • customInput: This tell React DatePicker to use our custom calendar button instead of the default text box.

How To Handle Date Validation In React?

When users fill a form, but sometimes they can skip the date field or enter the wrong date (like leaving it blank), this can create problems.

To avoid this problems, we validate the date field – means first we check if the user has selected a valid date before allowing them to continue.

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

function CustomDateInputCheck() {
  const [userDate, setUserDate] = useState(null);
  const [alertText, setAlertText] = useState('');

  const onCalendarSelect = (pickedDate) => {
    setUserDate(pickedDate);

    if (!pickedDate) {
      setAlertText('Please choose a valid date before continuing.');
    } else {
      setAlertText('');
    }
  };

  return (
    <div>
      <h3>Choose Your Meeting Date:</h3>
      <DatePicker
        selected={userDate}
        onChange={onCalendarSelect}
        placeholderText="Click to select date"
        dateFormat="dd/MM/yyyy"
      />

      {alertText && (
        <p style={{ color: 'crimson', fontWeight: 'bold' }}>{alertText}</p>
      )}
    </div>
  );
}

export default CustomDateInputCheck;

In this example we are added a validation, if users missed to selecting date, they will get alert message.

Previous
Next

Leave a Comment

BoxofLearn