Forms - DateRangePicker

DateRangePicker

Segmented range input with an attached range calendar popover. Soma owns the two endpoints, min/max validation, popover state and range selection; 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 }: DateRangePickerInputSnippetProps)} {#each segments as { part, value }, index (`start-${part}-${index}`)} {value} {/each} {/snippet} {#snippet children({ segments }: DateRangePickerInputSnippetProps)} {#each segments as { part, value }, index (`end-${part}-${index}`)} {value} {/each} {/snippet}

{statusMessage}

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

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

{#if tab === 'live'}

Controls

soma owns value, min/max dates, range length, disabled/unavailable dates and popover behavior. eidos owns visual treatment.

soma props - range value and constraints

open bindable {open ? 'open' : 'closed'} start setEndpoint('start', inputValue(event))} /> end setEndpoint('end', inputValue(event))} /> range presets minValue {minValue?.toString() ?? 'none'} maxValue {maxValue?.toString() ?? 'none'} min/max presets minDays maxDays visible months {#each [1, 2] as count} {/each} week starts {#each ['locale', '0', '1'] as value} {/each} locale direction {#each ['ltr', 'rtl'] as value} {/each} start segments {#each ['none', 'year', 'monthYear', 'date'] as value} {/each} end segments {#each ['none', 'year', 'monthYear', 'date'] as value} {/each} mode inline modal footer buttons clear cancel close states required disabled readonly single day close on select disable outside fixed weeks paged nav week numbers block weekends unavailable dates

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', 'fulfill', 'risk', 'threat', 'loss'] as value} {/each}

Demo content

label start name end name

soma headless - shared range, field, popover and calendar svelte

{somaSnippet}

eidos visual - root plus attached field, popover and range-calendar parts svelte

{eidosSnippet}

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

API reference

DateRangePicker is a composition over DateRangeField, Popover and RangeCalendar. Air has no local DateRangePicker; Terra in morfo-runtime is the historical baseline.

Prop	Owner	Default	Description
value bindable	soma	undefined	Range `{'{ start, end }'}` shared by both inputs and calendar.
placeholder bindable	soma	today	Visible month anchor.
open bindable	soma	false	Popover state.
minValue / maxValue	soma	-	Selectable date bounds. Invalid pairs mark the range calendar invalid and log through UIX.
minDays / maxDays / allowSingleDay	soma	- / - / true	Inclusive range length constraints.
isDateDisabled / isDateUnavailable / isDateHoliday	soma	-	Per-date matchers for hard disabled, unavailable and decorative holiday dates.
startReadonlySegments / endReadonlySegments	soma	[]	Independent segment locks for each endpoint.
numberOfMonths / fixedWeeks / pagedNavigation	soma	2 / false / false	Range calendar layout and navigation behavior.
closeOnRangeSelect	soma	true	Close the popover when both endpoints are selected.
size / variant / color	eidos	md / surface / primary	Visual-only data attrs for field, trigger and calendar.

Reference comparison

Feature	Air	Terra morfo-runtime	React Aria	Ark	Bits	UIX decision
DateRangePicker primitive	no	yes	yes	range mode	yes	Add Eidos wrapper over current Soma composition.
Segmented start/end inputs	-	yes	yes	yes	yes	Use DateRangeField parts inside the picker namespace.
Min/max date controls	-	yes	yes	yes	yes	Expose as direct props and visible demo controls.
Range length constraints	-	min/max days	custom validation	range constraints	custom	First-class `minDays`, `maxDays`, `allowSingleDay`.
Multiple visible months	calendar only	yes	yes	yes	yes	Top heading shows full range; each visible month gets its own title only when there are 2 months.

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

morfo contract

Source: src/uix/morfo/components/date-range-picker.ts. The picker declares only the composition root, trigger and calendar bridge; DateRangeField, RangeCalendar and Popover keep their own contracts.

Field	Value
name	"{dateRangePickerMorfo.name}"
kebab	"{dateRangePickerMorfo.kebab}"
scope	[{dateRangePickerMorfo.scope.map((s) => `"${s}"`).join(', ')}]
apg	composed: DateRangeField + Popover + RangeCalendar
parts.length	{dateRangePickerMorfo.parts.length}
own events	{dateRangePickerEvents.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'}

Composed contracts

Contract	Parts	Events	Role in picker
DateRangeField	{dateRangeFieldCompiled.parts.order.length}	{dateRangeFieldCompiled.actions.byName.size}	Label plus start/end segmented inputs.
RangeCalendar	{rangeCalendarCompiled.parts.order.length}	{rangeCalendarCompiled.actions.byName.size}	Range grid, min/max, preview and navigation.
Popover	{popoverCompiled.parts.order.length}	{popoverCompiled.actions.byName.size}	Disclosure, portal and floating content.

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

The public picker is a composition. Its event surface is the union of range calendar selection/navigation events, popover disclosure events and any field commit events.

Owner	Events	Responsibility
DateRangePicker	{dateRangePickerEvents.length}	Root state and composition.
DateRangeField	{dateRangeFieldEvents.length}	Endpoint field commits.
RangeCalendar	{rangeCalendarEvents.length}	Start selection, range commit, clear and calendar navigation.
Popover	{popoverCompiled.actions.byName.size}	Disclosure events.

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-range-picker/date-range-picker.css. The field and trigger use DateField tokens; the popup range grid mirrors Calendar without drawing a nested card.

Selector	Source	Purpose
`[data-date-range-picker]`	morfo	Root provider, open and invalid states.
`[data-date-range-picker][data-size][data-variant][data-color]`	eidos	Visual scale, treatment and intent palette.
`[data-date-range-field-input][data-endpoint]`	morfo	Start and end segmented fields.
`[data-date-range-picker-trigger]`	morfo	Calendar opener button.
`[data-date-range-picker-calendar][data-range-calendar]`	morfo	Range calendar bridge with nested chrome removed.
`[data-range-calendar-day][data-in-range]`	morfo	Range track styling.
`[data-range-calendar-day][data-range-start]`	morfo	Committed endpoint styling.

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

Accessibility

The picker combines DateRangeField's grouped segmented inputs, Popover disclosure and RangeCalendar's application-labelled grid.

Concern	Contract
Trigger	`aria-haspopup="dialog"`, `aria-expanded` and calendar label from Morfo translations.
Inputs	Each endpoint is a DateField group with editable spinbutton segments.
Calendar	Range grid exposes `role="application"`, grid cells and day buttons.
Keyboard	Arrow keys move by day/week, PageUp/PageDown navigates months, Enter/Space selects, Escape cancels range selection.
Validation	Invalid min/max pairs are surfaced in the calendar snippet and logged through the UIX logger.

{/if}

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

{#if showWeekNumbers} wk {/if} {#each weekdays as day} {day} {/each} {#each month.weeks as week} {#snippet children({ weekNumber }: DateRangePickerGridRowSnippetProps)} {#if showWeekNumbers} {weekNumber ?? ''} {/if} {#each week as date} {/each} {/snippet} {/each}

{/each}