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 Datepicker section.
Form usage
Datepicker fits naturally into scheduling and reporting forms where the selected date is one submitted field.
Datepicker form usage
Default wrapper
Stock datepicker 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.
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.
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.
Fiscal year boundary
A cross-year fiscal window keeps month and year navigation on selectable values when the current month is outside the selected year.
Fiscal year boundary (Plain-CSS)
Drill into the year panel and choose 2025; April becomes the first enabled month while January through March stay disabled.
Fiscal year boundary (Tailwind CSS)
The same bounded fiscal-year behavior works inside a utility-composed shell.