Components / Date Range Picker

Date Range Picker

Start and end segmented inputs plus a calendar trigger that opens a two-month range calendar with an optional quick-pick preset rail. Selecting the end date completes the range and closes the popover. Try the presets or paint a range below. This preview is the real component running in WebAssembly.

Examples

Pick a range

razor
<ZitsDateRangePicker @bind-Value="_range" Presets="_presets" />

@code {
    NaviusDateRange _range = NaviusDateRange.Empty;
    IReadOnlyList<ZitsDateRangePreset> _presets = new[]
    {
        new ZitsDateRangePreset("Last 7 days", new NaviusDateRange(
            DateOnly.FromDateTime(DateTime.Today.AddDays(-6)),
            DateOnly.FromDateTime(DateTime.Today))),
    };
}

Installation

Terminal bash
navius add date-range-picker

API reference

ZitsDateRangePicker (the range is a NaviusDateRange; presets are ZitsDateRangePreset records):

Prop Type Default
Value NaviusDateRange Empty
ValueChanged EventCallback<NaviusDateRange> -
DefaultValue NaviusDateRange Empty
Open bool false
OpenChanged EventCallback<bool> -
NumberOfMonths int 2
FirstDayOfWeek DayOfWeek Sunday
Presets IReadOnlyList<ZitsDateRangePreset>? null
IsDateUnavailable Func<DateOnly, bool>? null
Separator string en dash
MinValue / MaxValue DateOnly? null
Disabled / ReadOnly / Required / Invalid bool false