Guides

Preset Ranges

Define as many preset ranges as you need. Each entry is a key-value pair where the key is the button label and the value is a [Date, Date] tuple. Use rangeCallback to know when a preset is clicked.

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

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

// A "Custom Range" entry is automatically appended
<ReactDateTimePicker
  ranges={ranges}
  rangeCallback={(index, label) => console.log(index, label)}
  // ...other props
/>

Restricting Dates

Use minDate and maxDate to restrict the selectable date range. Calendar cells outside this range are greyed out and unclickable. Preset range buttons whose dates fall outside the constraints are automatically disabled.

import { set, sub, add } from 'date-fns';

<ReactDateTimePicker
  // Allow dates from 2 years ago to tomorrow
  minDate={set(sub(new Date(), { years: 2 }), {
    hours: 0, minutes: 0, seconds: 0
  })}
  maxDate={set(add(new Date(), { days: 1 }), {
    hours: 23, minutes: 59, seconds: 59
  })}
  // Constrain year dropdown
  years={[2022, 2026]}
  // Show the constraints in the footer
  displayMinDate
  displayMaxDate
  // ...other props
/>

Custom Styling

Combine the theme prop with classNames for full visual control. The theme sets the base colors, and classNames lets you override individual elements.

// Example: Fully custom green theme with rounded cells
<ReactDateTimePicker
  theme="emerald"
  classNames={{
    rootContainer: 'shadow-2xl rounded-2xl',
    normalCell: 'rounded-full',
    normalCellHover: 'bg-emerald-100! dark:bg-emerald-900!',
    startCell: 'bg-emerald-600! rounded-full',
    endCell: 'bg-emerald-600! rounded-full',
    withinRangeCell: 'bg-emerald-50! dark:bg-emerald-950!',
    rangeButtonSelected: 'bg-emerald-600! text-white!',
    applyButton: 'bg-emerald-600! hover:bg-emerald-700!',
    footerContainer: 'border-t-2 border-emerald-200',
  }}
  // ...other props
/>

// Tip: Use the ! suffix (Tailwind important modifier) to
// override the picker's built-in styles.

Localization

Translate every visible string in the picker by providing a locale object. The date format string follows the date-fns format specification.

// German locale example
<ReactDateTimePicker
  locale={{
    format: 'dd.MM.yyyy HH:mm',
    sundayFirst: false,
    days: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
    months: [
      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
      'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember',
    ],
    fromDate: 'Von Datum',
    toDate: 'Bis Datum',
    selectingFrom: 'Auswahl von',
    selectingTo: 'Auswahl bis',
    apply: 'Anwenden',
    cancel: 'Abbrechen',
    close: 'Schließen',
  }}
  // ...other props
/>