Specialized inputs

AppDateRangePicker

A start-and-end date range field with a two-month popover calendar.

<app-date-range-picker label="Stay dates" start-name="stayStart" end-name="stayEnd" />

A date range picker captures a start and an end date in one control — a stay, a booking window, a report period. <app-date-range-picker> renders the shared <wui-date-range> element: a trigger plus a two-month popover where you click the start day, then the end day, with the span between highlighted.

It takes its look entirely from @webority/theme, so the Razor <app-date-range-picker> and the React <AppDateRangePicker> render an identical calendar on every surface. For a single date, use <app-date-picker> instead.

Menu open motion product-wide via data-wui-menu-motion — pick one, then open the menus below

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the field above it.

<app-date-range-picker label="Stay dates" start="2026-07-05" end="2026-07-12" start-name="pgStart" end-name="pgEnd" />

Start and end

The control is form-associated — start and end seed the initial ISO dates, and each posts under its own name (start-name / end-name) through a hidden input, so a plain form submits both without JavaScript.

A labelled range field
Click the start day, then the end day; the span between fills in.
Show code 
<app-date-range-picker label="Stay dates" start-name="stayStart" end-name="stayEnd" />
Two names, two posted valuesstart-name and end-name are the form field names the start and end dates post under — the control keeps a hidden input for each, so a plain form submits both without any JavaScript.

Min and max

Constrain the selectable window with min and max — the calendar disables everything outside it, on both months.

Restrict to a valid window
Days before min and after max can't be picked as either end.
Show code 
<app-date-range-picker start-name="repStart" end-name="repEnd" min="2026-07-01" max="2026-07-31" />

Sizes

size sets the control height — sm, md (default), lg — reusing AppInput's tiers, and first-day chooses the starting weekday just like the date picker.

Height tiers
The trigger scales; the popover calendar stays the same.
Show code 
<app-date-range-picker label="Small" size="sm" />
<app-date-range-picker label="Large" size="lg" />

When to use

Use it when

  • Capturing a start-and-end date range — a stay, a booking window, a report period.
  • You want one control for the whole range rather than two separate date fields.
  • Restricting the range to a valid window with min / max.

Reach for something else when

  • You only need a single date. → AppDatePicker
  • You need a date and a time of day. → a date-time control
  • The two dates are unrelated fields. → two AppDatePickers

Every option

The whole surface of the component, one cell per value — bounds, week start, sizes, and every field state.

min / max — bounds

min="2026-07-01" (no max)
max="2026-07-31" (no min)
min + max — both bounds

first-day — every weekday

first-day="0"
first-day="1"
first-day="2"
first-day="3"
first-day="4"
first-day="5"
first-day="6"

size

size="sm"
size="md"
size="lg"

state

(empty)
populated
disabled
required (label marker)
error
Pick a range
error + required
Pick a range
hint (no error)
Check-in to check-out
disabled + populated

placeholder

(default) "Start – End"
placeholder="Pick a range"

Attributes

AttributeTypeDefaultDescription
labelstring—Field label above the control.
start-namestring—Form field name the start date posts under; also the element id.
end-namestring—Form field name the end date posts under.
startstring—Initial range start as an ISO string (YYYY-MM-DD).
endstring—Initial range end as an ISO string (YYYY-MM-DD).
minstring—Earliest selectable date (ISO). Days before it are disabled.
maxstring—Latest selectable date (ISO). Days after it are disabled.
placeholderstringStart – EndEmpty-state text inside the field.
requiredboolfalseAdds the required marker to the label.
hintstring—Helper text below the field (shown when there is no error).
errorstring—Field-level error message shown below the control.
disabledbool—Disable the control.
sizestringmdControl height tier — sm | md | lg, matching AppInput.
first-dayint0First weekday of the calendar — 0 Sunday (default) … 6 Saturday.
aria-labelstring—Accessible name for the control, when it should differ from the visible label. Falls back to the label.
idstring—Explicit id for the control, which the label's for then points at. Omit it to keep the name-derived id.
input-classstring—Extra classes on the control itself (the wui-date-range) — the React className counterpart. The plain class attribute merges onto the .field wrapper instead.