ComponentsPickers and uploads

Date range picker

Two dates chosen in one calendar: a start and an end. Choose it for stays, reports and leave requests, where the span matters as much as either date.

Basic usage

Bind a DateRange with @bind-DateRange. Start and End are nullable while the range is being chosen.

Stay at the field station

Arrival and departure

4 nights, from Monday, November 9, 2026 to Friday, November 13, 2026.

DisplayMonths shows several months at once, which makes ranges across a month boundary easy to pick.

SunMonTueWedThuFriSat

Variant and Margin shape the closed field exactly as they shape a text field.

MudDateRangePicker: Variant × Margin
Variant ↓ · Margin →	None	Dense	Normal
Text	Report period	Report period	Report period
Filled	Report period	Report period	Report period
Outlined	Report period Report period	Report period Report period	Report period Report period

MinDate and MaxDate limit the calendar, MinDays and MaxDays limit the length, and IsDateDisabledFunc blocks days that a range may not include.

Cabin booking

Season 1 June to 31 August · 2 to 7 days · no Wednesdays

No booking yet.

Editable ranges accept typed dates in both halves. Placeholders name each half, and Culture with DateFormat sets the text.

Annual leave

Type yyyy-MM-dd in each half

Férias

pt-BR: dd/MM/yyyy, month names in Portuguese

Common ranges are one click away beside the field; inside the calendar, OK commits and Cancel restores the previous range.

Sales report period

The same field states as every MudBlazor input.