Modern React DateTimePicker Pro

A modern, production-ready, and highly customizable DateTime Picker for React and Next.js. Native-feeling calendar + Android-style radial clock, with zero external date-library dependencies.

Live Demo

modern-rdp-pro.vercel.app

GitHub Pages setup: GITHUB_PAGES.md

Features

• Modes: date, time, datetime, multi, range, datetimerange
• Multi select: pick several days; Ctrl / Cmd + click to add or remove
• Range + presets: quick ranges (Today, This Week, months, Custom…) and optional dual-month view
• Form ready: DateTimeField with Floating UI popover and hidden ISO submit value
• Actions: Confirm / Cancel (commit on confirm), Clear, Today, Now, optional icon buttons
• Constraints: minDate / maxDate, disabledDates, disabledDaysOfWeek, minTime / maxTime, disabledHours, disabledTimes
• i18n: locales such as tr-TR, en-US (labels and calendar via Intl)
• Theming: CSS variables, light / dark, customStyles overrides
• Lightweight: core logic uses Intl and native Date (@floating-ui/react for the field popover)

Installation

npm install modern-rdp-pro
# or
yarn add modern-rdp-pro

Usage

1. Theme CSS

import 'modern-rdp-pro/theme.css';

2. DateTimeField (recommended for forms)

import { DateTimeField } from 'modern-rdp-pro';

<form>
  <DateTimeField
    label="Appointment Date"
    name="appointment"
    mode="datetime"
    locale="tr-TR"
    showWeekNumbers
    closeOnSelect={false}
    required
  />
  <button type="submit">Submit</button>
</form>

3. Inline DateTimePicker

import { DateTimePicker } from 'modern-rdp-pro';

<DateTimePicker
  mode="datetime"
  theme="dark"
  showClearButton
  showTodayButton
  showNowButton
  onChange={(val) => console.log(val)}
  onConfirm={() => console.log('confirmed')}
  onCancel={() => console.log('cancelled')}
/>

4. Multi date selection

<DateTimePicker
  mode="multi"
  locale="tr-TR"
  showClearButton
  onChange={(dates) => console.log(dates)} // Date[] | null
/>

Normal click selects a single day. Ctrl (Mac: Cmd) + click toggles extra days.

5. Date range + datetime range

<DateTimePicker
  mode="range"
  showPresets
  numberOfMonths={2}
  onChange={(range) => console.log(range)} // [Date, Date] | null
/>

<DateTimePicker
  mode="datetimerange"
  showClearButton
  autoTabSwitch
  onChange={(range) => console.log(range)}
/>

6. Disabled days

<DateTimePicker
  mode="date"
  disabledDaysOfWeek={[0, 6]} // Sunday, Saturday
  disabledDates={[new Date('2026-07-23'), new Date('2026-08-01')]}
/>

7. Time bounds and blocked hours

Works in time, datetime, and datetimerange modes.

<DateTimePicker
  mode="time"
  is24Hour
  minTime={new Date(1970, 0, 1, 8, 0)}   // 08:00
  maxTime={new Date(1970, 0, 1, 18, 0)}  // 18:00
  disabledHours={[11, 13]}               // whole hours blocked (minutes ignored)
  disabledTimes={[
    new Date(1970, 0, 1, 14, 30),        // only 14:30 blocked
  ]}
/>

• disabledHours — blocks an entire hour (0–23); minutes do not matter
• disabledTimes — blocks a specific HH:mm
• Invalid selections snap to the nearest allowed time
• 24-hour dial: outer ring 13–24, inner ring 01–12

Theming

:root {
  --rdp-primary-color: #007aff;
  --rdp-radius: 12px;
  --rdp-width: 380px;
}

[data-theme="dark"], .rdp-dark {
  --rdp-bg: #1c1c1e;
}

<DateTimePicker
  customStyles={{
    primaryColor: '#6200ee',
    primaryHover: '#3700b3',
    backgroundColor: '#f5f5f5',
    textColor: '#1a1a1a',
    borderRadius: '8px',
    fontFamily: '"Segoe UI", Tahoma, Geneva, Verdana, sans-serif',
  }}
/>

Props (overview)

DateTimePicker

| Prop | Type | Default | Notes | |------|------|---------|--------| | mode | 'date' \| 'time' \| 'datetime' \| 'multi' \| 'range' \| 'datetimerange' | 'datetime' | Selection behavior | | value / initialValue | Date \| Date[] \| null | — | Range uses length-2 array; multi uses Date[] | | onChange | (val) => void | — | Fires on selection (or on Confirm if action buttons) | | locale | string | 'en-US' | e.g. tr-TR | | theme | 'light' \| 'dark' | — | Built-in theme | | showWeekNumbers | boolean | false | Week # column | | showTodayButton | boolean | false | Under calendar (date / datetime / multi) | | showNowButton | boolean | false | Under clock (time / datetime / datetimerange) | | showActionButtons | boolean | false | Confirm / Cancel; commits only on Confirm | | showClearButton | boolean | false | Clears selection immediately | | iconActionButtons | boolean | false | Icon-style Clear / Cancel / OK | | showSelectionPreview | boolean | true | Footer preview | | autoTabSwitch | boolean | true | Jump to time tab after date | | showAMPM / is24Hour | boolean | true / false | 12h vs 24h | | minuteStep | number | 1 | e.g. 5, 15 | | weekStartsOn | 0 \| 1 | 1 | Sun / Mon | | minDate / maxDate | Date | — | Bounds | | disabledDates | Date[] | — | Specific blocked days | | disabledDaysOfWeek | number[] | — | 0–6 | | minTime / maxTime | Date | — | Time bounds (time / datetime / datetimerange) | | disabledHours | number[] | — | Fully blocked hours (0–23) | | disabledTimes | Date[] | — | Specific blocked HH:mm values | | showPresets | boolean | false | Quick ranges (range / datetimerange) | | numberOfMonths | 1 \| 2 | 1 | Side-by-side months in range | | presets / presetLabels / defaultPreset | — | — | Customize preset list | | onConfirm / onCancel / onClear | () => void | — | Action callbacks | | customStyles / labels | object | — | Style and copy overrides |

DateTimeField

All DateTimePicker props, plus label, name, placeholder, required, disabled, closeOnSelect, floatingLabel, useFloatingUI, format.

Changelog

1.6.0

• Time constraints: minTime, maxTime, disabledHours, disabledTimes
• disabledHours blocks a full hour; disabledTimes blocks a specific HH:mm
• 24-hour clock dial: outer 13–24, inner 01–12
• Fix selected hour label rotating upside-down on the clock hand
• Playground controls for time bounds and blocked hours/times

1.5.2

• Fix range field popover overflow (presets + calendar clipped / off-screen)
• Improve Floating UI flip/shift/size so the picker stays in the viewport

1.5.1

• Live demo link updated to Vercel

1.5.0

• mode="multi" — multiple date selection (Ctrl / Cmd + click)
• mode="datetimerange" — date range with start/end times
• Range presets (showPresets), dual months (numberOfMonths={2})
• showClearButton, showTodayButton, showNowButton, iconActionButtons
• Confirm mode: value commits on Tamam / OK when showActionButtons is on
• Stronger docs for disabledDates and weekday locks
• Demo playground updates (modes, blocked dates, GitHub / npm links)

Links

• GitHub: Deneshiqua/modern-rdp-pro
• npm: modern-rdp-pro
• Demo: Vercel

License

MIT