Web Date Range Picker
A powerful and flexible date picker component with single and range selection modes, internationalization support, and comprehensive customization options.
Key Features
Single & Range Selection
Support for both single date and date range selection with intuitive click and drag interactions
Input Masking
Automatic date formatting as you type with support for multiple date formats
Multi-Month Display
Display multiple months side by side in horizontal or grid layouts
Internationalization
Built-in support for multiple languages with auto-detection and custom strings
Date Restrictions
Min/max dates, disabled weekdays, custom disable logic, and more
Keyboard Navigation
Full keyboard support with arrow keys, home/end, page up/down, and shortcuts
Custom Styling
Fully themeable with CSS custom properties and extensive style options
Web Component
Use as a standard web component or via JavaScript API
TypeScript Support
Full TypeScript definitions included for better development experience
Live Hover Preview
In range mode, hovering after the first click paints the would-be range live, with per-mode behavior for disabled dates (v1.13)
Modal Positioning
Centered overlay with backdrop, container-query inner layout, and auto-engage on small viewports (v1.12)
Bulk Metadata Loading
Fetch a whole month of pricing/availability in one call via beforeMonthChangedCallback — 30–40× faster than per-day callbacks
Quick Start
Install via npm:
Use as a Web Component:
Or use the JavaScript API: