a11y_datetime

Accessible datetime picker fork based on flatpickr. This page follows the counter-style visual direction and keeps picker demos practical.

Dark / Light
Language
Theme
GitHub Repository FriendsOfREDAXO Zum Theme-Builder Open Full Demo
English

What is a11y_datetime?

a11y_datetime is an accessibility-focused fork of flatpickr. It improves keyboard behavior, ARIA semantics, and design customization through CSS variables.

Highlights

  • Improved screen reader experience with stronger ARIA wiring
  • More reliable keyboard navigation in date/time interactions
  • Flexible theming using CSS custom properties
  • Compatible with common flatpickr-style setups

Hinweis: Teile der Seite sind aktuell noch auf Englisch.

Quick Demo

Tip: Use Tab, arrow keys, Enter, and Escape to test keyboard accessibility.

Type A

Core Interaction

Single Date + Time

Custom picker is active to keep keyboard behavior consistent across devices.

Time Only

Custom picker is active so hour and minute fields remain keyboard-accessible.

Week Select

Selects a full week and highlights all days in that week.

Date Range (3 Months)

Desktop: 3 months side-by-side. Mobile: From/To flow with one month view.

Optional Playground

Mobile fallback

On many mobile browsers, the picker intentionally falls back to native controls. This improves usability and reliability for touch input. In the playground, switch to "force custom picker" to always use the full calendar UI.

Type B

German Locale Formats and Business Hours

Choose a format variant and preview it directly in the input field.

DE Master Picker

Locale: de, 24h clock; output is shown directly in the input.

DE Business Hours (Sunday disabled)

Time windows: Mon-Fri 08:00-17:00, Sat 10:00-14:00. Sunday has no rule and is disabled.

Type C

Locale and Multilanguage

Localized month/day names and output formats for German, French, and Japanese.

German (de)

Locale: de, 24h, Format: d.m.Y H:i

Français (fr)

Locale: fr, 24h, Format: d/m/Y H:i

日本語 (ja)

Locale: ja, 24h, Format: Y/m/d H:i

Type D

Theme Variants and Accent Color

Apply preset themes and custom colors live to all demo pickers. Modern follows the counter-inspired visual direction.

Custom Theme Builder (Light + Dark)

Light
Dark

A11y contrast check (WCAG)

Contrast report appears after changing builder values.

Inline Preview Calendar

Der Inline-Kalender zeigt Theme-Änderungen sofort in Light und Dark.

No active theme yet.
Type E

A11y Solutions and Shortcuts

This demo highlights core accessibility behavior and quick keyboard shortcuts.

Screen Reader Announcements

Month and date updates are announced via aria-live.

Popover Focus Traps

Time and month/year popovers keep tab focus stable until Done, Enter, or Escape.

Rule-based Availability

timeRules can restrict time windows and disable weekdays without matching rules.

Theme Accessibility

Contrast and motion can be verified quickly via presets and variables.

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

Shortcuts are active outside input fields and are announced in the hidden live region.