Customization

Themes

The picker ships with 22 color themes based on Tailwind CSS color names. Set the theme prop to change the accent color used for selected cells, range highlights, and buttons.

// Available themes:
// Chromatic: sky (default), blue, orange, emerald, green, purple, red,
//            amber, yellow, lime, teal, cyan, indigo, violet, fuchsia, pink, rose
// Grayscale: slate, gray, zinc, neutral, stone

<ReactDateTimePicker
  theme="emerald"
  // ...other props
/>

classNames Overrides

For fine-grained control, use the classNames prop to inject custom CSS classes into specific parts of the picker. Use Tailwind's ! suffix to override existing styles.

<ReactDateTimePicker
  classNames={{
    rootContainer: 'shadow-2xl',
    normalCell: 'rounded-full',
    normalCellHover: 'bg-emerald-100!',
    startCell: 'bg-emerald-600!',
    endCell: 'bg-emerald-600!',
    withinRangeCell: 'bg-emerald-50!',
    applyButton: 'bg-emerald-600! hover:bg-emerald-700!',
    rangeButtonSelected: 'bg-emerald-600!',
  }}
  // ...other props
/>

All Available Keys

// All available classNames keys:
type ClassNames = {
  rootContainer?: string;       // Outermost picker wrapper
  rangesContainer?: string;     // Sidebar with preset range buttons
  rangeButtonDefault?: string;  // Unselected range button
  rangeButtonSelected?: string; // Selected range button
  fromToRangeContainer?: string; // Each date picker panel
  normalCell?: string;          // Default calendar day cell
  normalCellHover?: string;     // Calendar day cell on hover
  greyCell?: string;            // Day from adjacent month
  invalidCell?: string;         // Day disabled by min/maxDate
  startCell?: string;           // Selected start date cell
  endCell?: string;             // Selected end date cell
  withinRangeCell?: string;     // Cells between start and end
  startDot?: string;            // ActiveNotifier dot (start)
  endDot?: string;              // ActiveNotifier dot (end)
  footerContainer?: string;     // Footer with Apply/Cancel
  applyButton?: string;         // Apply button
  cancelButton?: string;        // Cancel/Close button
};