react-datepicker

react-datepicker is a highly popular and customizable date picker component for React applications. It provides a flexible and user-friendly interface for selecting dates, times, or date ranges within a web form. Built on top of React, it leverages its component-based architecture to offer a wide array of features and customization options through props.

Key Features:
* Date and Time Selection: Allows selection of just a date, or a date combined with a time.
* Date Range Selection: Easily pick a start and end date for a range.
* Customizable UI: Supports extensive styling and customization of the calendar appearance to match application themes.
* Date Filtering: Enables specifying which dates are available for selection (e.g., disable past dates, weekends, or specific holidays).
* Localization: Supports multiple locales for displaying dates and calendar text in different languages.
* Keyboard Navigation: Enhances accessibility with full keyboard support for navigating and selecting dates.
* Prop-Driven Configuration: Most features are controlled via props, making it easy to configure without complex custom logic.
* Clearable Input: Option to clear the selected date.

Installation:
To use react-datepicker, you first need to install it via npm or yarn:
```bash
npm install react-datepicker --save
# or
yarn add react-datepicker
```

Usage:
After installation, you need to import the `DatePicker` component and its default CSS file into your React component.
The component typically uses React's `useState` hook to manage the selected date, which is passed to the `selected` prop, and an `onChange` handler to update this state when a new date is picked. It supports various date formats via the `dateFormat` prop and can be configured for time selection, minimum/maximum dates, and more.

Example Code

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

// Basic styling to make the example visible
const containerStyle = {
  fontFamily: 'Arial, sans-serif',
  padding: '20px',
  maxWidth: '600px',
  margin: '0 auto'
};

const inputGroupStyle = {
  marginBottom: '15px'
};

const labelStyle = {
  display: 'block',
  marginBottom: '5px',
  fontWeight: 'bold'
};

function MyDatePickerComponent() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  return (
    <div style={containerStyle}>
      <h2>React Datepicker Examples</h2>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>Single Date Selection (with time):</label>
        <DatePicker
          selected={selectedDate}
          onChange={(date) => setSelectedDate(date)}
          dateFormat="MMMM d, yyyy h:mm aa" // Example format with time
          showTimeSelect
          timeFormat="HH:mm"
          timeIntervals={15}
          timeCaption="Time"
          isClearable
          placeholderText="Select a date and time"
          className="my-custom-datepicker-input"
        />
        <p>Selected: {selectedDate ? selectedDate.toLocaleString() : 'None'}</p>
      </div>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>Date Range Selection:</label>
        <div style={{ display: 'flex', gap: '10px' }}>
          <DatePicker
            selected={startDate}
            onChange={(date) => setStartDate(date)}
            selectsStart
            startDate={startDate}
            endDate={endDate}
            placeholderText="Start Date"
            isClearable
          />
          <DatePicker
            selected={endDate}
            onChange={(date) => setEndDate(date)}
            selectsEnd
            startDate={startDate}
            endDate={endDate}
            minDate={startDate} // End date cannot be before start date
            placeholderText="End Date"
            isClearable
          />
        </div>
        <p>Range: {startDate ? startDate.toLocaleDateString() : 'N/A'} - {endDate ? endDate.toLocaleDateString() : 'N/A'}</p>
      </div>

      <div style={inputGroupStyle}>
        <label style={labelStyle}>Date with minimum/maximum limits:</label>
        <DatePicker
          selected={selectedDate}
          onChange={(date) => setSelectedDate(date)}
          dateFormat="dd/MM/yyyy"
          minDate={new Date()}
          maxDate={new Date().setDate(new Date().getDate() + 30)} // Max 30 days from now
          placeholderText="Select within 30 days"
          isClearable
        />
        <p>Selected: {selectedDate ? selectedDate.toLocaleDateString() : 'None'}</p>
      </div>
    </div>
  );
}

export default MyDatePickerComponent;

Example Code

Related Topics