Components / Date Picker
Date Picker
A date picker composed from a ZitsPopover and a calendar. The trigger is an outline button showing the formatted date or a placeholder; choosing a day sets the value and closes the popover. This preview is the real component running in WebAssembly.
Examples
Selected: none
razor
<ZitsDatePicker @bind-Value="_date" />
@code { private DateOnly? _date; }The trigger merges your class through Cn, which resolves Tailwind conflicts via TailwindMerge so the consumer class wins: pass class="w-36" to override the default w-[280px] trigger width.
razor
<ZitsDatePicker @bind-Value="_date" class="w-36" />Installation
Terminal
bash
navius add date-pickerAPI reference
| Prop | Type | Default |
|---|---|---|
| Value | DateOnly? | null |
| ValueChanged | EventCallback<DateOnly?> | - |
| Placeholder | string | "Pick a date" |
| Format | string | "MMMM d, yyyy" |