Date Range Picker Component
Advanced date picker web component from @keenmate/web-daterangepicker with multiple selection modes,
keyboard navigation, date restrictions, and custom rendering. Built as a framework-agnostic web component.
Key Features: Single/range/multiple date selection, keyboard navigation, rolling month/year selector, date restrictions (min/max, disabled dates), custom badges and tooltips, validation callbacks, and action buttons.
Input Sizes
Use the input-size attribute to change the input field size. Available sizes: xs, sm, md (default), lg, xl. Sizes are aligned with Pure Admin's .pa-input sizes.
Basic Date Pickers
Date Format Options
Date Restrictions
Action Buttons
Range Handling Modes (with Disabled Dates)
When selecting ranges that include disabled dates, different handling modes control the behavior:
Inline Calendar (Always Visible)
Inline mode displays the calendar directly on the page instead of in a dropdown.
Use cases:
- Dashboard date filters
- Embedded booking calendars
- Always-visible date selection
- Large screen layouts
Keyboard Navigation
Keyboard Shortcuts:
↑↓- Navigate by day←→- Navigate by weekCtrl+←→- Previous/next monthPageUp/Down- Previous/next monthHome/End- First/last day of monthCtrl+Home/End- First/last day of yearEnter- Select focused dayEsc- Close calendarTab- Switch month columns (multi-month)T- Jump to today
Custom Rendering (Holidays & Events)
Programmatic Control
Events & Validation
Resources
- npm Package:
@keenmate/web-daterangepicker - Repository: github.com/keenmate/web-daterangepicker
- Documentation: See package README and AI instructions in
../../web-daterangepicker/ai/ - CSS Variables: 40+ customizable variables with
--drp-*prefix - Theming: Pure Admin theme overrides in
src/scss/core-components/_web-components-theme.scss