Components
Date picker
Date picker
Form-bound date input wrapped in tokenised chrome. Native <input type="date"> rendering varies wildly across browsers — this helper layers Flatpickr on top so every user sees the same calendar widget.
Canonical
Variants
Optional
optional
With min
min="2026-05-14"
Props
| Attribute | Values | Notes |
|---|---|---|
| for | Model expression | Required. DateTime, DateOnly, or DateTimeOffset. |
| label | String | Optional. Renders a <label> above the input. |
| optional | Boolean | Appends (optional) to the label. |
| min / max | ISO 8601 date (yyyy-MM-dd) | Constrain selectable dates. |
| class | Tailwind classes | Default mb-5. |
Do & don't
A single
<koala-date-picker for="Input.CompletionDate" label="Target completion" />
Do
Bind via
for so FluentValidation drives the required state and the error message renders below.
A bare native
<input type="date">
Don't
Don't fall back to the native date input. Its picker chrome is OS-specific and ignores the design tokens —
<koala-date-picker> gives a consistent Flatpickr calendar everywhere.