Dowe

FORM

DateRange

DateRange is an Input-like trigger with a custom calendar dropdown for one bounded interval and independently typed start and end Signals.

PLAYGROUND

Plan a release window

Choose the start and end in the custom calendar dropdown; separate YYYY-MM-DD values are written while min and max constrain both sides to the planning quarter.

Release window

Choose the interval used by the release calendar.

TWO VALUES

Start and end stay explicit

Use the two Signals independently when a summary, query, or request needs each boundary as a separate field.

Calendar interval + typed bounds

signal startDate value:"2026-08-01"
signal endDate value:"2026-08-31"

DateRange start:startDate end:endDate label:"Release window" labelFloating:true startValue:"2026-08-01" endValue:"2026-08-31" min:"2026-07-01" max:"2026-12-31" helpText:"Choose the interval used by the release calendar." variant:"outlined" scheme:"primary" size:"lg" name:"release-window"

SCENARIOS

One interval, different workflows

The same range contract supports travel, reporting, and availability flows without changing the component semantics.

Trip dates

Seven nights, including the departure day.

Report period

Availability

Needs review

The end date must leave time for the handoff.

DateRange startValue:"2026-09-10" endValue:"2026-09-17" label:"Trip dates" placeholder:"Select a trip" helpText:"Seven nights, including the departure day." variant:"soft" scheme:"info" size:"md"
DateRange startValue:"2026-10-01" endValue:"2026-10-31" label:"Report period" placeholder:"Select a month" variant:"line" scheme:"secondary" size:"sm"
DateRange startValue:"2026-11-05" endValue:"2026-11-08" label:"Availability" placeholder:"Select open dates" min:"2026-11-01" max:"2026-12-31" variant:"solid" scheme:"success" size:"md"

FEEDBACK AND SCALE

Keep both boundaries understandable

helpText and errorText apply to the interval, while size keeps both controls aligned as one field.

Small range

Compact range for a filter bar.

Large range

Choose an end date after the start date.

BEHAVIOR

A coordinated date pair

Dowe keeps the start and end values separate in source while rendering a coordinated range surface on every target.

BINDING

Two string Signals

start and end accept string Signal paths and preserve their own YYYY-MM-DD values.

VALIDATION

One bounded interval

min and max constrain the selectable calendar window; invalid date literals are rejected by the compiler.

TARGETS

Aligned calendar

Web, iOS, and Android keep the month navigation, selected range, bounds, and start/end behavior paired.

API

Props

DateRange also accepts the applicable common spacing, sizing, typography, visibility, accessibility, and shadow props.

Prop	Type	Default
No data There are no records to display

No data