Examples

Explore various usage patterns and configurations of the DatePicker component.

1. Basic Usage

Simple date picker. Click on the input field to select a date.

Selected: None

import DatePicker from 'react-datepicker-bkrdmrcioglu';
import { useState } from 'react';

function Example() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      language="en"
    />
  );
}

2. Date and Time Picker

Date and time can be selected together.

Selected: None

<DatePicker
  value={date}
  onChange={setDate}
  showTime={true}
  language="en"
/>

3. Date Range Picker

Select a date range with start and end dates.

Selected Range: Start - End

import { DateRangePicker } from 'react-datepicker-bkrdmrcioglu';

<DateRangePicker
  startDate={startDate}
  endDate={endDate}
  onChange={(start, end) => {
    setStartDate(start);
    setEndDate(end);
  }}
  language="en"
/>

4. Quick Select Options

Quick selection options for common date ranges.

<DatePicker
  value={date}
  onChange={setDate}
  showQuickSelect={true}
  language="en"
/>

5. Week Numbers

Display ISO week numbers.

<DatePicker
  value={date}
  onChange={setDate}
  showWeekNumbers={true}
  language="en"
/>

6. Portal Mode

Render the calendar in a React Portal (useful for overflow issues).

<DatePicker
  value={date}
  onChange={setDate}
  usePortal={true}
  language="en"
/>

7. Different Date Formats

Support for various date formats.

DD/MM/YYYY

MM/DD/YYYY

YYYY-MM-DD

// DD/MM/YYYY
<DatePicker format="DD/MM/YYYY" />

// MM/DD/YYYY
<DatePicker format="MM/DD/YYYY" />

// YYYY-MM-DD
<DatePicker format="YYYY-MM-DD" />

8. Min/Max Constraints

Restrict date selection to a specific range.

Allowed range: 12/22/2025 - 1/28/2026

const minDate = new Date();
minDate.setDate(minDate.getDate() - 7);

const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 30);

<DatePicker
  minDate={minDate}
  maxDate={maxDate}
/>

9. All Features Combined

Using all available features together.

<DatePicker
  value={date}
  onChange={setDate}
  showTime={true}
  showQuickSelect={true}
  showWeekNumbers={true}
  usePortal={true}
  format="DD/MM/YYYY"
  language="en"
/>

10. Hotel Booking Example

Real-world example with custom daily prices.

Check-in

Check-out

const prices = [
  { date: new Date(), label: '$120' },
  // ...
];

<DatePicker
  value={checkInDate}
  onChange={setCheckInDate}
  customDays={prices}
/>

11. Disabled/Booked Days

Example showing visually distinct disabled dates.

const bookedDays = [
  { 
    date: new Date(), 
    disabled: true, 
    className: '!bg-red-100 !text-red-600 line-through dark:!bg-red-900 dark:!text-red-200' 
  }
];

<DatePicker
  customDays={bookedDays}
/>

12. Hotel Booking (Single Input)

Select range in a single input with price information.

Selected: Check-in - Check-out

<DateRangePicker
  startDate={startDate}
  endDate={endDate}
  onChange={(start, end) => {
    setStartDate(start);
    setEndDate(end);
  }}
  customDays={hotelPrices}
/>

13. Time Picker

Standalone time picker with scrollable selection.

Select Time

Selected Time: None

import { TimePicker } from 'react-datepicker';

const [time, setTime] = useState<string | null>(null);

<TimePicker
  value={time}
  onChange={setTime}
  placeholder="Select time"
/>