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.