DatePicker Showcase

Introduction

The DatePicker component allows users to select dates with smooth animations and customizable styles. Below are examples demonstrating different configurations.

Usage Examples

Installation

To start using the DatePicker component, you'll need to install the library via npm or yarn. Open your terminal and run the following command:

npm i react-datepicker

Single Date Picker

This is a basic implementation of a single date picker, where users can select a single date. It’s ideal for scenarios like setting a due date, booking a single event, or selecting a birthdate.

<DatePicker
  selectedDate={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  datePickerClassName="p-4 border border-gray-300 rounded-md"
/>

Date Range Picker

The Date Range Picker allows users to select a range of dates. It’s perfect for booking start and end dates for travel, rentals, or other time-bound events.

<DatePicker
  isRangePicker
  startDate={startDate}
  endDate={endDate}
  onRangeChange={(dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  }}
  datePickerClassName="p-4 border border-gray-300 rounded-md shadow-lg"
/>

Custom Date Format

This example demonstrates the use of a custom date format. Users can customize the date format to suit regional preferences or specific design requirements.

<DatePicker
  selectedDate={selectedDate}
  onChange={(date) => setSelectedDate(date)}
  dateFormat="dd/MM/yyyy"
  datePickerClassName="p-4 border border-gray-300 rounded-md"
/>