keen_web_daterangepicker

Phoenix LiveView wrapper for the <web-daterangepicker> custom element. Themeable, range-aware, form-aware.

wrapper v1.0.0-rc.1 upstream v2.0.0-rc03
๐Ÿ“ฆ

Basic Examples

Core features including single/range modes, date formats, localization, and multi-month layouts.

๐Ÿ“

Calendar Sizing

Control calendar size with the unified density system for fonts, spacing, and cell dimensions.

๐ŸŽญ

Theming

Customize appearance with CSS custom properties and see multiple themes in action.

๐ŸŽจ

Base Variables

Theme-designer typography variables for fonts, sizes, weights, and line heights.

๐Ÿท๏ธ

Badges & Tooltips

Display badges and tooltips using static arrays, dynamic callbacks, or HTML tooltips.

โœจ

Custom Rendering

Advanced customization with slots and render callbacks for dynamic day cell content.

โšก

Events & Callbacks

Event system and beforeDateSelectCallback for validation and control of date selections.

๐Ÿ”ง

API Methods

Control the date picker programmatically using public API methods and properties.

๐Ÿ”จ

JavaScript Instantiation

Create and configure date pickers programmatically for dynamic applications.

๐ŸŽฏ

Button Configuration

Control button visibility, create custom presets, and enable multi-range selection.

๐Ÿ“ฑ

Responsive Behavior

Modal positioning mode, viewport-tier widths, container-query inner layout, and auto-engage on small screens.

๐Ÿ›

Logging & Debugging

Built-in logging system with categorized debug output for development and troubleshooting.

โฑ๏ธ

Time / Datetime Picker (v1.14)

picker-mode="time" and "datetime" โ€” rolling-list time UI alongside the calendar.

๐ŸŒ

Localization & Custom Names

locale, week-start-day, and the month_names / weekday_names overrides โ€” declarative attributes and runtime push_update/3.

๐Ÿงฉ

Colocated Hooks

Dynamic per-day badges via getDateMetadataCallback โ€” the client hook JS colocated in the LiveView .ex (no demos.js, no bundler).