Accessible date picker with calendar view and keyboard navigation.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

mode

• Type: DatePickerMode - Default: 'single'
• Selection mode

initialDate

• Type: string
• Initial selected date (ISO string)

initialRange

• Type: { start: string
• Initial date range (ISO strings)

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 8px; /* Border radius */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-date-picker
• .cc-date-picker__day
• .cc-date-picker__days
• .cc-date-picker__header
• .cc-date-picker__month
• .cc-date-picker__nav
• .cc-date-picker__weekday
• .cc-date-picker__weekdays