Phoenix LiveView wrapper for the <web-daterangepicker> custom element. Themeable, range-aware, form-aware.
Core features including single/range modes, date formats, localization, and multi-month layouts.
Control calendar size with the unified density system for fonts, spacing, and cell dimensions.
Customize appearance with CSS custom properties and see multiple themes in action.
Theme-designer typography variables for fonts, sizes, weights, and line heights.
Display badges and tooltips using static arrays, dynamic callbacks, or HTML tooltips.
Advanced customization with slots and render callbacks for dynamic day cell content.
Event system and beforeDateSelectCallback for validation and control of date selections.
Control the date picker programmatically using public API methods and properties.
Create and configure date pickers programmatically for dynamic applications.
Control button visibility, create custom presets, and enable multi-range selection.
Modal positioning mode, viewport-tier widths, container-query inner layout, and auto-engage on small screens.
Built-in logging system with categorized debug output for development and troubleshooting.
picker-mode="time" and "datetime" โ rolling-list time UI alongside the calendar.
locale, week-start-day, and the month_names / weekday_names overrides โ declarative attributes and runtime push_update/3.
Dynamic per-day badges via getDateMetadataCallback โ the client hook JS colocated in the LiveView .ex (no demos.js, no bundler).
/test/selection/test/form/test/events/test/attributes
/test/localization