a11y_datetime

An accessibility-first fork based on flatpickr with keyboard-friendly navigation, reduced-motion support, and CSS-variable driven theming.

Dark / Light
Language
Keyboard-first Screen-reader friendly Reduced motion aware Themeable via CSS variables
GitHub Website

Live Design Controls

Tip: These controls change CSS variables live so you can inspect what a11y_datetime looks like in different design systems.

Interactive Examples + Code

Type A: Core Selection

Single, range, multiple, and locale basics for general date/time usage.

Single Date + Time

Default booking style picker with time selection and clear title label.

Show setup code 
pick("#demo-single", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  calendarTitle: "Select a date",
  announceChanges: true
});

Multilanguage: German

German locale with day-month-year formatting and 24h time.

Show setup code 
pick("#demo-locale-de", {
  locale: "de",
  enableTime: true,
  time_24hr: true,
  dateFormat: "d.m.Y H:i",
  calendarTitle: "Termin wählen",
  announceChanges: true
});

Multilanguage: Français

French locale with localized month/day names and compact datetime format.

Show setup code 
pick("#demo-locale-fr", {
  locale: "fr",
  enableTime: true,
  time_24hr: true,
  dateFormat: "d/m/Y H:i",
  calendarTitle: "Choisir une date",
  announceChanges: true
});

Multilanguage: 日本語

Japanese locale example for date/time input with locale-aware labels.

Show setup code 
pick("#demo-locale-ja", {
  locale: "ja",
  enableTime: true,
  time_24hr: true,
  dateFormat: "Y/m/d H:i",
  calendarTitle: "日付を選択",
  announceChanges: true
});

Date Range

Check-in / check-out flow with three visible months for faster range selection.

Show setup code 
pick("#demo-range", {
  mode: "range",
  showMonths: 3,
  dateFormat: "Y-m-d",
  calendarTitle: "Select a date range",
  announceChanges: true
});

Multiple Dates

Useful for blackout dates, campaign days, or flexible attendance planning.

Show setup code 
pick("#demo-multiple", {
  mode: "multiple",
  dateFormat: "Y-m-d",
  conjunction: ", ",
  calendarTitle: "Select dates",
  announceChanges: true
});

Type B: Time and Scheduling Rules

Time-only flows, stepped wheels, weekday business windows, and precise timestamps.

Time Only

Compact time chooser for appointments, calls, and shift start windows.

Show setup code 
pick("#demo-time", {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  calendarTitle: "Select a time",
  announceChanges: true
});

Time Wheel Popover (15 min)

Apple-like split time selection with fixed 15 minute steps, accessible on desktop and mobile.

Show setup code 
pick("#demo-time-wheel", {
  enableTime: true,
  minuteIncrement: 15,
  dateFormat: "Y-m-d H:i",
  calendarTitle: "Select date and stepped time",
  announceChanges: true
});

Time Wheel Popover 24h

Compact stepped time popover without AM/PM, using a 24 hour clock.

Show setup code 
pick("#demo-time-wheel-24", {
  enableTime: true,
  time_24hr: true,
  minuteIncrement: 15,
  dateFormat: "Y-m-d H:i",
  calendarTitle: "Select date and stepped time (24h)",
  announceChanges: true
});

Weekday Time Windows

Define time limits by weekday, for example Monday to Friday 08:00-17:00 and Saturday 10:00-14:00.

Show setup code 
pick("#demo-business-hours", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  defaultDate: "2026-07-06 09:00",
  timeRules: [
    { days: [1, 2, 3, 4, 5], from: "08:00", to: "17:00" },
    { days: [6], from: "10:00", to: "14:00" }
  ],
  calendarTitle: "Business hours schedule",
  announceChanges: true
});

Weekday Time Windows (DE)

Monday-Friday 08:00-17:00, Saturday 10:00-14:00. Sunday is disabled in this example.

Show setup code 
pick("#demo-business-hours-de", {
  locale: "de",
  enableTime: true,
  time_24hr: true,
  dateFormat: "d.m.Y H:i",
  timeRules: [
    { days: [1, 2, 3, 4, 5], from: "08:00", to: "17:00" },
    { days: [6], from: "10:00", to: "14:00" }
  ],
  calendarTitle: "Termine innerhalb der Oeffnungszeiten",
  announceChanges: true
});

Appointment Preset

Scheduler preset: month/year wheel, small future window, and weekday office hours.

Show setup code 
pick("#demo-appointment", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  monthYearWheel: true,
  yearRange: { past: 1, future: 2 },
  yearWheelManualInput: true,
  minuteIncrement: 15,
  timeRules: [
    { days: [1, 2, 3, 4, 5], from: "08:00", to: "17:00" }
  ],
  minDate: "today",
  calendarTitle: "Appointment booking",
  announceChanges: true
});

Week Numbers + Precision Time

Advanced picker with week numbers, 24h clock, and second-level precision.

Show setup code 
pick("#demo-precision", {
  enableTime: true,
  enableSeconds: true,
  time_24hr: true,
  weekNumbers: true,
  dateFormat: "Y-m-d H:i:S",
  calendarTitle: "Precise date and time"
});

Type C: Header, Presets, and Plugins

Month/year wheel, preset ranges, and plugin-driven confirmation and week selection.

Month + Year Wheel

Wheel-style month/year chooser with configurable year range and optional manual year input.

Show setup code 
pick("#demo-month-year-wheel", {
  dateFormat: "Y-m-d",
  monthYearWheel: true,
  yearRange: { past: 10, future: 10 },
  yearWheelManualInput: true,
  calendarTitle: "Month and year wheel",
  announceChanges: true
});

Birthday Picker Preset

Month/year wheel with a birthdate range: current year back to 100 years, no future dates.

Show setup code 
pick("#demo-birthday", {
  dateFormat: "Y-m-d",
  monthYearWheel: true,
  yearRange: { past: 100, future: 0 },
  yearWheelManualInput: true,
  maxDate: "today",
  calendarTitle: "Birth date",
  announceChanges: true
});

Single Date + Time + Confirm

Example with an explicit confirm action before the picker closes.

Show setup code 
pick("#demo-confirm", {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  calendarTitle: "Confirm date and time",
  announceChanges: true,
  plugins: [plugins_confirmDatePlugin.default({
    confirmText: "Confirm ",
    showAlways: true,
    theme: "light"
  })]
});

Optional Feature Playground

Toggle optional UI behavior for titlebar, close button, and initial keyboard day focus.

Show setup code 
pick("#demo-optional", {
  dateFormat: "Y-m-d",
  calendarTitle: "Optional feature demo",
  showTitleBar: true,
  showCloseButton: true,
  initialDayFocus: "today",
  announceChanges: true
});

Min/Max + Disabled Weekends

Constrain date range and disable non-business days for scheduling workflows.

Show setup code 
pick("#demo-limits", {
  minDate: "today",
  maxDate: new Date().fp_incr(30),
  disable: [
    function (date) {
      return date.getDay() === 0 || date.getDay() === 6;
    }
  ],
  calendarTitle: "Business day booking"
});

Alt Input (Human Readable)

Store machine format while showing a user-friendly date string in the UI.

Show setup code 
pick("#demo-alt", {
  altInput: true,
  altFormat: "l, d F Y",
  dateFormat: "Y-m-d",
  defaultDate: "today",
  calendarTitle: "Human friendly date"
});

Week Select

Pick an entire calendar week with hover preview and week number output.

Show setup code 
pick("#demo-weekselect", {
  weekNumbers: true,
  plugins: [plugins_weekSelect.default()],
  calendarTitle: "Select a week",
  announceChanges: true
});

Type D: Validation and Display Variants

Input constraints, disabled dates, and display-focused alternatives.

Inline Calendar

Always-visible calendar for dashboards, kiosks, or booking sidebars.

Show setup code 
pick("#demo-inline", {
  inline: true,
  dateFormat: "Y-m-d",
  defaultDate: "today",
  calendarTitle: "Inline planning"
});

Keyboard: focus input, press Enter to open, Tab through controls, Arrow keys move days/months, Enter/Space selects, Esc closes.

Design Notes

Balanced

General-purpose UI with neutral surfaces and medium contrast.

--a11y-dt-day-bg / --a11y-dt-month-bg
Soft Editorial

Airy typography and lower visual noise for content-heavy products.

--a11y-dt-font-size / --a11y-dt-radius
High Contrast

Stronger borders and day contrast for demanding accessibility baselines.

--a11y-dt-day-fg / --a11y-dt-calendar-border
Modern

Rams-inspired reduction: calm neutrals, clear hierarchy, minimal visual noise.

--a11y-dt-calendar-bg / --a11y-dt-selected-bg

All variations are done without changing picker internals, only through configuration and CSS variables.

A11y Solutions and Shortcuts

This demo highlights core accessibility behavior and provides direct shortcuts for quick keyboard testing.

Screen Reader Announcements

Month/date updates are announced through aria-live when announceChanges is active.

Popover Focus Traps

Time and month/year popovers keep Tab focus inside until Done, Enter, or Escape.

Weekday Rule Constraints

timeRules can restrict time windows and disable weekdays without a matching rule.

Reduced Motion and Contrast

Motion and contrast can be adapted without code changes using variables and presets.

Focus Single Date + TimeAlt+1
Focus Time Wheel DemoAlt+2
Focus Month/Year Wheel DemoAlt+3
Focus German Business Hours DemoAlt+4
Focus Optional PlaygroundAlt+0
Jump to this sectionAlt+K

Shortcuts are active outside text inputs. Each action is also announced in a hidden live region.