a11y_datetime

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

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

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
});

Date Range

Check-in / check-out flow with keyboard-friendly month and day traversal.

Show setup code 
pick("#demo-range", {
  mode: "range",
  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
});

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
});

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 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"
});

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
});

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

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