Examples
These examples focus on the styled wrapper in its default plain-CSS presentation and in a theme-aware Tailwind shell. Headless composition lives in the separate headless Date Range Picker section.
Form usage
Date Range Picker fits naturally into scheduling and reporting forms where the selected range is one submitted field.
Date Range Picker form usage (Plain-CSS)
Date Range Picker form usage (Tailwind CSS)
Dual Date Range Picker form usage (Plain-CSS)
Dual Date Range Picker form usage (Tailwind CSS)
Default wrapper
Stock date range picker behavior with editable input, bounded navigation, and the material year → month → day drill-down.
Default wrapper (Plain-CSS)
The default wrapper picks up the theme contract without extra utility classes.
Default wrapper (Tailwind CSS)
Tailwind can own the outer surface while semantic tokens keep light, dark, and custom themes in sync.
Dual wrapper (Plain-CSS)
The leading calendar owns start and the trailing calendar owns end.
Dual wrapper (Tailwind CSS)
Tailwind styles the wider product surface while the picker keeps fixed start/end roles.
Popup width
Set a minimum and maximum popup width while keeping the popup's inline end aligned to the complete input-and-icon shell.
Popup width (Plain-CSS)
Minimum width
Open the 14rem input. The popup grows to its 18rem minimum and expands toward the inline start, leaving its end edge aligned with the input and icon.
Maximum width
Open the 28rem input. The popup stops at its 20rem maximum and remains aligned to the input shell's end edge.
Popup width (Tailwind CSS)
Minimum width
Open the 14rem input. The popup grows to its 18rem minimum and stays end-aligned.
Maximum width
Open the 28rem input. The popup stops at its 20rem maximum and stays end-aligned.
Dual popup width (Plain-CSS)
Dual minimum width
A narrow field can still open the dual overlay at its two-panel minimum.
Dual maximum width
The overlay stops at its configured maximum and remains end-aligned.
Dual popup width (Tailwind CSS)
Dual minimum width
The dual overlay grows beyond the narrow field and stays end-aligned.
Dual maximum width
The dual overlay caps at its maximum while the field can remain wider.
Custom format
Adapter-driven formatting changes the input text and period label without changing the calendar behavior.
Custom format (Plain-CSS)
The wrapper consumes the adapter directly for both input parsing and overlay display text.
Custom format (Tailwind CSS)
Tailwind can style the product surface without freezing the demo into a single light or dark palette.
Dual custom format (Plain-CSS)
The adapter formats both fixed-role calendars and the shared range input.
Dual custom format (Tailwind CSS)
The utility shell scales to the dual overlay without changing adapter behavior.
Bounded range
Min and max dates constrain day, month, and year navigation, including keyboard movement at the panel edges.
Bounded range (Plain-CSS)
The wrapper stops month and year traversal on the nearest enabled value inside the allowed window.
Bounded range (Tailwind CSS)
Use a utility shell when range constraints need to sit inside a larger Tailwind-composed surface without breaking theme switching.
Dual bounded range (Plain-CSS)
Both panels share the same bounds while retaining their start and end responsibilities.
Dual bounded range (Tailwind CSS)
Tailwind supplies the wider shell while both calendars honor the same valid window.