Installation
Install the package via npm:
Web Component Usage
The simplest way to use the date picker is as a web component:
Try it:
⚠️ Important: Shadow DOM & Custom Styles
The date picker uses Shadow DOM, which means custom styles must be injected using the customStylesCallback property.
Why This Matters
Your global CSS cannot penetrate the Shadow DOM boundary. If you want to customize the calendar's appearance (day cells, badges, tooltips, etc.),
you must use customStylesCallback.
How to Inject Custom Styles
What You CAN Style Without customStylesCallback
- Input element - Regular CSS works (not in Shadow DOM)
- CSS custom properties - Theme colors using
--drp-*variables
📚 Learn more: Custom Styling & Theming | Custom Styles for Special Dates
JavaScript API Usage
For more control, use the JavaScript API:
Basic Options
Here are some commonly used options:
| Option | Type | Default | Description |
|---|---|---|---|
selectionMode | 'single' | 'range' | 'single' | Whether to select a single date or a range |
dateFormatMask | string | 'YYYY-MM-DD' | Format for date values |
calendarOpenTrigger | 'focus' | 'typing' | 'manual' | 'focus' | When to open calendar: on focus, when typing, or manually via button |
visibleMonthsCount | number | 1 | Number of months to display |
locale | string | 'auto' | Locale for UI strings and date formatting |
Debugging
Enable debug logging during development to troubleshoot issues:
- Categorized logs: INIT, NAVIGATION, UI, RENDERING, SELECTION, VALIDATION, DRAG, INTERACTION
- Timestamps: Millisecond precision for performance analysis
- Function context: Each log shows which function and operation
- Filterable: Use browser console filters to find specific issues
Example console output:
⚠️ Important: Only enable debug logging during development. Never ship with show-debug-info enabled in production.
For complete debugging documentation, see the Debugging & Logging section in the API reference.
Next Steps
Explore the features and customization options: