Forms · DatePicker

DatePicker

Date input with an attached calendar popover. DatePicker owns the shared value, visible month and open state; Soma composes DateField, Popover and Calendar, while Eidos only adds the visual size, variant and color recipe.

parts{compiled.parts.order.length} events{events.length} value{valueLabel} min/max{boundsLabel} months{numberOfMonths}

{labelText} {#snippet children({ segments }: DatePickerInputSnippetProps)} {#each segments as { part, value }, index (`${part}-${index}`)} {value} {/each} {/snippet}

{boundsMessage || valueMessage}

{#snippet children(args: DatePickerCalendarSnippetProps)} {@render calendarBody(args)} {/snippet}

trace {#if trace.length === 0} open the picker and select a date {:else} {#each trace.slice(0, 3) as entry} {entry.event} · {entry.family}{entry.intent ? ' · ' + entry.intent : ''} {fmtTime(entry.at)} {/each} {/if} open {String(open)} value {valueLabel}

{#if tab === 'live'}

Controls

Props grouped by the layer that owns them: soma keeps value, min/max, popover state and calendar behavior; eidos adds visual treatment. Sema events live in the dedicated { event.preventDefault(); tab = 'sema'; }}>Sema tab.

soma props · value, min/max and calendar

open bindable {open ? 'open' : 'closed'} value selected date setValueFromInput(inputValue(event))} /> minValue {minValue?.toString() ?? 'none'} maxValue {maxValue?.toString() ?? 'none'} min/max preset visible month numberOfMonths {#each [1, 2] as value} {/each} weekStartsOn {#each ['locale', '0', '1'] as value} {/each} locale direction {#each ['ltr', 'rtl'] as value} {/each} state flags required disabled readonly mode inline modal footer buttons clear cancel close calendar behavior close on select disable outside fixed weeks paged nav prevent deselect week numbers date matchers disable weekends booked unavailable

eidos props · visual treatment

size {#each ['sm', 'md', 'lg'] as value} {/each} variant {#each ['surface', 'outline', 'ghost'] as value} {/each} color {#each ['primary', 'secondary', 'neutral', 'affirm', 'risk'] as value} {/each}

Demo content

label input name

soma headless · shared value, min/max, popover and calendar svelte

{somaSnippet}

eidos visual · root plus attached DateField, Popover and Calendar parts svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API reference

Public DatePicker surface used by this demo. The component is date-first: value, min/max, popup state and calendar behavior are the relevant controls here.

Prop	Owner	Default	Description
value bindable	soma	undefined	Selected `DateValue`. Calendar and input segments share this state.
placeholder bindable	soma	today	Visible month anchor when the picker opens.
open bindable	soma	false	Popover open state.
minValue / maxValue	soma	-	Selectable date limits. Invalid min/max marks Calendar invalid and exposes the message.
isDateDisabled	soma	-	Matcher for hard-disabled days.
isDateUnavailable	soma	-	Matcher for unavailable days that remain visible in the grid.
required / disabled / readonly	soma	false	Root, input, trigger and calendar state.
closeOnDateSelect	soma	true	Close the popover after a calendar selection.
numberOfMonths	soma	1	Render one or two visible months in the popup.
fixedWeeks / pagedNavigation	soma	false	Calendar grid height and navigation step.
disableDaysOutsideMonth	soma	true	Days from adjacent months are shown but not selectable.
weekStartsOn / locale / dir	soma	services	Calendar ordering, labels and directional keys.
size eidos	eidos	md	Shared visual scale for field, trigger and calendar.
variant eidos	eidos	surface	Visual treatment of the input and popup calendar.
color eidos	eidos	primary	Intent palette for focus and selected-day affordances.

Reference comparison

Feature	Air	React Aria	Ark	Bits	UIX	Decision
Segmented input + calendar popover	no local Air component	yes	yes	yes	yes	Compose DateField, Popover and Calendar.
Explicit minValue / maxValue	-	yes	yes	yes	yes	Expose directly in Soma and demo controls.
Unavailable / disabled matchers	-	yes	yes	yes	yes	Forward to Calendar as first-class picker props.
Multiple months	-	yes	yes	yes	yes	Calendar remains the source of month layout.
Composite semantic events	-	callbacks	callbacks	callbacks	yes	Field, calendar and popover events are surfaced together in the picker demo.

{/if} {#if tab === 'morfo'}

morfo · declarative contract

Source: src/uix/morfo/components/date-picker.ts. DatePicker declares only the composition-specific root, trigger and calendar bridge. DateField, Popover and Calendar keep their own contracts.

Field	Value
name	"{datePickerMorfo.name}"
kebab	"{datePickerMorfo.kebab}"
scope	[{datePickerMorfo.scope.map((s) => `"${s}"`).join(', ')}]
apg	composed: DateField + Popover + Calendar
parts.length	{datePickerMorfo.parts.length}
own events	{datePickerEvents.length}
composed events	{events.length}

Parts

{#each partsList as part} {/each}

Part	Marker	Element	Role	Archetype	States	Optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.role ?? '-'}	{part.archetype ?? '-'}	{part.states.length ? part.states.join(' \| ') : '-'}	{part.optional ? 'yes' : 'no'}

{#each datePickerMorfo.parts as rawPart} {@const partAny = rawPart as unknown as { kebab: string; aria?: ReadonlyArray<{ attr: string; value: { kind: string }; condition?: { when: string; prop?: string; part?: string }; severity?: string }>; keyboard?: ReadonlyArray<{ key: string; action: string }> }} {@const dataAttrs = compiled.contracts.dataAttrsByPart.get(partAny.kebab) ?? []} {@const ariaAttrs = partAny.aria ?? []} {@const keyboard = partAny.keyboard ?? []} {#if dataAttrs.length || ariaAttrs.length || keyboard.length}

{partAny.kebab}

{#if dataAttrs.length}

{#each dataAttrs as attr} {/each}

data-attr	Values	Source kind
{attr.attr}	{attr.values ? attr.values.join(' \| ') : '-'}	{'value' in attr && attr.value ? (attr as { value: { kind: string } }).value.kind : '-'}

{/if} {#if ariaAttrs.length}

{#each ariaAttrs as a} {/each}

aria-attr	Source kind	Condition	Severity
{a.attr}	{a.value.kind}	{a.condition ? `when ${a.condition.when}${a.condition.prop ? ` (${a.condition.prop})` : ''}${a.condition.part ? ` (${a.condition.part})` : ''}` : 'always'}	{a.severity ?? 'required'}

{/if} {#if keyboard.length}

{#each keyboard as kb} {/each}

key	action
{kb.key === ' ' ? 'Space' : kb.key}	{kb.action}

{/if} {/if} {/each}

Events declaration

{#each eventRows as { owner, action }} {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined} {/each}

Name	Family	Verb	Sequence	Intent	Target
{owner}.{action.name}	{action.semantic.family}	{action.semantic.verb ?? '-'}	{action.semantic.sequence ?? 'pre'}	{typeof intentDecl === 'string' ? intentDecl : intentDecl ? 'fromProp' : '-'}	{action.target}

{/if} {#if tab === 'sema'}

sema · events + perceptual signature

The picker event surface is composed: DateField commits typed segment changes, Calendar commits date selection and navigation, and Popover owns disclosure events.

Owner	Events	Why
DatePicker	{datePickerEvents.length}	Root state and composition.
DateField	{dateFieldEvents.length}	Typed date commits and clears.
Calendar	{calendarEvents.length}	Date select, unselect and month navigation.
Popover	{popoverEvents.length}	Open and close causes.

Composed event declarations

{#each eventRows as { owner, action }} {@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined} {/each}

Owner	Name	Family	Verb	Sequence	Intent
{owner}	{action.name}	{action.semantic.family}	{action.semantic.verb ?? '-'}	{action.semantic.sequence ?? 'pre'}	{typeof intentDecl === 'string' ? intentDecl : intentDecl ? 'fromProp' : '-'}

{/if} {#if tab === 'recipe'}

Eidos recipe

Selectors live in src/uix/eidos/components/date-picker/date-picker.css. The root supplies DateField variables and the popup calendar reuses the Calendar recipe without drawing a second card.

Selector	Source	Purpose
`[data-date-picker]`	morfo	Root provider, open and validation states.
`[data-date-picker][data-size][data-variant][data-color]`	eidos	Visual scale, treatment and intent palette.
`[data-date-picker-trigger]`	morfo	Calendar opener button.
`[data-popover-content]:has([data-date-picker-calendar])`	eidos	Popup width follows one or two calendar months.
`[data-date-picker-calendar][data-calendar]`	morfo	Calendar bridge with nested card chrome removed.
`[data-calendar-day][data-selected]`	morfo	Selected date state inherited from Calendar.

{/if} {#if tab === 'a11y'}

Accessibility

The picker combines the ARIA contracts of DateField, Popover and Calendar. The trigger opens a dialog-style popup; the grid keeps Calendar keyboard behavior.

Keyboard

Key	Action
Enter / Space	Open the popover from Trigger; select focused day inside Calendar.
Escape	Close the popover.
Arrow keys	Edit date segments in the input or move focus by day/week in the calendar grid.
PageUp / PageDown	Calendar month navigation.
Home / End	Move to first or last day of the current week.

ARIA contract

Part	Attribute	Value
root	aria-disabled / aria-readonly / aria-required	{`{state flags}`}
input	role	"group"
segment	role	"spinbutton"
trigger	aria-haspopup	"dialog"
trigger	aria-expanded	{`{open}`}
content	role	"dialog"
calendar grid	role	"grid"
calendar day	aria-selected / aria-disabled	{`{date state}`}

{/if}

{#each months as month (month.value.toString())}

{#if months.length > 1} {/if} 1 ? monthHeadingId(month.value) : undefined}> {#if showWeekNumbers} wk {/if} {#each weekdays as day} {day} {/each} {#each month.weeks as week} {#snippet children({ weekNumber }: DatePickerGridRowSnippetProps)} {#if showWeekNumbers} {weekNumber ?? ''} {/if} {#each week as date} {/each} {/snippet} {/each}

{/each}