Date Picker
Overview
Section titled “Overview”Date Picker implements its own month-grid calendar logic in the helm (month navigation, week
layout, day selection) and composes ZitsPopover/ZitsPopoverTrigger/ZitsPopoverContent only
for the anchored positioning and dismiss behavior. There is no Navius date-picker primitive
underneath (that contract belongs to the separate Navius DateRangePicker primitive, which this
component does not use). The trigger is an outline ZitsButton-styled button showing the
formatted date or a placeholder plus a calendar icon; picking a day sets the value and closes the
popover.
Install
Section titled “Install”navius add date-picker --to ./src/MyApp --namespace MyApp.Ui<ZitsDatePicker @bind-Value="_date" />
@code { private DateOnly? _date; }Parts and props
Section titled “Parts and props”ZitsDatePicker is a single control with no part tree.
| Prop | Type | Default | Description |
|---|---|---|---|
Value |
DateOnly? |
null |
The selected date. Two-way bindable. |
ValueChanged |
EventCallback<DateOnly?> |
- | Fired on day selection. |
Placeholder |
string |
"Pick a date" |
Trigger label shown when Value is null. |
Format |
string |
"MMMM d, yyyy" |
.NET date format string for the trigger label. |
Styling surface
Section titled “Styling surface”Attributes is forwarded to the trigger and merged with its base classes via Cn.Merge, caller
classes applied last; pass class="w-36" to override the default w-[280px] trigger width.
There are no variant/size parameters.
Data attribute hooks
Section titled “Data attribute hooks”| Part | Attribute | Description |
|---|---|---|
| Trigger | data-empty |
Present when Value is null; selects the muted placeholder text color. |
| Day button | data-selected, data-today |
Set per rendered day cell; drive the primary/accent fill. |
Date Picker renders the month grid as <table role="grid"> with <td role="gridcell"> cells and
aria-selected on the day <button>s; navigation buttons carry aria-label="Go to previous/next month". This is the component’s own hand-rolled markup, not a wrapped primitive contract.