Features

Date Range Selection

The picker displays two calendars side-by-side for selecting a start and end date. By default, the left calendar sets the start date and the right calendar sets the end date.

<ReactDateTimePicker
  ranges={ranges}
  start={start}
  end={end}
  applyCallback={handleApply}
  smartMode
>
  <button>Pick dates</button>
</ReactDateTimePicker>

Smart Mode

Enable smartMode for a more flexible date selection experience. It enables the following behaviors:

Ping-pong selection — Clicks alternate between setting the start and end date regardless of which calendar side is clicked. A “Selecting From” / “Selecting To” indicator shows which date will be set next.
Auto-swap invalid ranges — When a selection (cell click or typed input) would place the start date after the end date, the other date is automatically adjusted by one day. Without smartMode, such selections are rejected.
Same-month calendar offset — When both dates fall in the same month and year, the right calendar shifts forward one month so you always see two different months.
Relaxed cell constraints — Without smartMode, cells outside the current range are greyed out and unclickable. With smartMode, all cells are clickable and auto-swap handles any conflicts.

Past Search Friendly

The pastSearchFriendly prop modifies the same-month calendar offset behavior. Instead of the right calendar shifting forward, the left calendar shifts back one month. This keeps the current month on the right with the previous month visible on the left, which is useful when searching backward in time (e.g. log analysis, historical data). Requires smartMode.

<ReactDateTimePicker
  ranges={ranges}
  start={start}
  end={end}
  applyCallback={handleApply}
  smartMode
  pastSearchFriendly
>
  <button>Pick dates</button>
</ReactDateTimePicker>

Time Selection

Each calendar panel includes hour and minute selectors. By default it uses a 24-hour clock (0-23). Set twelveHoursClock to switch to a 12-hour format with an AM/PM selector.

// 12-hour clock with AM/PM selector
<ReactDateTimePicker
  ranges={ranges}
  start={start}
  end={end}
  applyCallback={handleApply}
  twelveHoursClock
>
  <button>Pick dates</button>
</ReactDateTimePicker>

Preset Ranges

Define preset date ranges that appear as buttons in the sidebar. A "Custom Range" option is automatically appended. Ranges that fall outside minDate/maxDate are automatically disabled.

import { startOfDay, endOfDay, subDays, startOfMonth, endOfMonth, subMonths } from 'date-fns';

const ranges = {
  Today: [startOfDay(new Date()), endOfDay(new Date())],
  Yesterday: [subDays(startOfDay(new Date()), 1), subDays(endOfDay(new Date()), 1)],
  'Last 7 Days': [subDays(new Date(), 7), new Date()],
  'This Month': [startOfMonth(new Date()), endOfMonth(new Date())],
  'Last Month': [startOfMonth(subMonths(new Date(), 1)), endOfMonth(subMonths(new Date(), 1))],
};

Dark Mode

Dark mode is built-in using Tailwind CSS class-based dark mode. Add class="dark" to any ancestor element and the picker automatically switches to dark colors. No separate prop is needed.

<!-- Add 'dark' class to any ancestor element -->
<body class="dark">
  <!-- The picker automatically uses dark styles -->
  <ReactDateTimePicker ... />
</body>

<!-- Or toggle it dynamically -->
<script>
  document.body.classList.toggle('dark');
</script>

Mobile Support

The picker automatically stacks calendars vertically on small screens. Use forceMobileMode to always stack, or noMobileMode to always show side-by-side.

// Force mobile (stacked) layout
<ReactDateTimePicker forceMobileMode ... />

// Force desktop (side-by-side) layout
<ReactDateTimePicker noMobileMode ... />