DateRangePicker

The DateRangePicker renders a read-only input that opens a calendar callout. Clicking a day starts the range, clicking a second day closes it, and clicking again starts a new range. Beyond the usual input states (Label, Placeholder, Required, IsEnabled) the calendar itself can show week numbers, highlight the current and selected month, and render a start/end time picker with ShowTimePicker. The input's look is adjustable too: IconName/IconLocation replace and reposition its icon, and Underlined and HasBorder switch between the bordered, underlined and borderless appearances. AutoClose closes the callout after the second pick and disabling it keeps the callout open, ShowClearButton adds a reset button (labelled through ClearButtonTitle) once a range is set, and StartingValue decides which month and which times the calendar opens on while no value is selected. Opening the callout moves the keyboard focus onto the day grid, unless the input is editable and the range may still be typed.

Presets renders a list of shortcuts next to the calendar so the most common ranges are one click away. Each BitDateRangePickerPreset carries the text of its button and either a fixed Value or a ValueProvider function, which is re-evaluated on every click and therefore keeps relative ranges such as "Last 7 days" correct however long the page has been open. The applied preset stays highlighted until the range is changed by any other means, OnPresetSelect reports which one was clicked, and when AutoClose is on (and the picker is not Standalone), selecting one closes the callout just like picking the second date does. A preset can also be disabled, titled and styled individually. A preset whose range violates the calendar's restrictions (MinDate, MaxDate, MinRange, the disabled days or ExcludeDisabledDates) is rejected when clicked, since a shifted variant of the advertised range would not be the range its button promised.

MinDate and MaxDate bound the whole calendar: days, months and years outside them are disabled and the navigation buttons stop at the boundary. MaxRange and MinRange instead bound the length of the selection itself - once the start date is picked, every day that would produce a range longer than MaxRange or shorter than MinRange becomes unselectable. MaxRange also accounts for the hours and minutes of a range, so the time picker's spinners are disabled as soon as they would exceed it. DisablePast and DisableFuture bound the calendar by today exactly as a MinDate or a MaxDate of today would, without having to keep one up to date; where both apply, the narrower of the two wins.

Beyond the min/max bounds, individual days can be blocked out. DisabledDaysOfWeek takes the recurring days to disable (weekends, for example), DisabledDates takes an explicit list of dates (holidays, blackout days) and IsDateDisabled takes a predicate for anything rule-based. Disabled days cannot be clicked and are skipped by the keyboard navigation, but by default the range simply spans over them, so use them for days that must not be a start or an end of the selection. When the range must not cover them at all, ExcludeDisabledDates also disables every day whose range, measured from the already picked start date, would contain one.

HighlightedDates marks days that deserve attention without making them unselectable, and GetDayClass attaches an arbitrary CSS class to any day cell, which makes it possible to color-code a calendar (busy days, promotions, deadlines) from the application's own data.

The shape of the day grid is configurable: FirstDayOfWeek overrides the first column of the week coming from the culture, ShowOutsideDays hides the leading and trailing days of the adjacent months, FixedWeeks always renders six week rows so the calendar keeps a constant height while navigating, WeekNumberRule chooses how week numbers are computed, and Today overrides the date the calendar considers as today, which is useful for tests and for server-driven "current date" scenarios.

MonthCount renders up to three consecutive months side by side, which is how a range spanning a month boundary is picked without navigating in between: the hover preview, the selection and the keyboard navigation all flow across the grids. Only the first month carries the "previous month" button and only the last one the "next month" button, so navigating moves the whole strip. The days of the adjacent months are dropped from the grids, since they would otherwise show up twice, and the calendar quietly falls back to a single month whenever the viewport is too narrow to fit them all. By default each navigation click moves the strip by a single month; PagedNavigation makes it move by all of the rendered months at once, so consecutive pages never overlap.

HourStep and MinuteStep set how much each press of the time picker's up/down buttons changes the start and end times. They apply to both the start and the end time inputs and are handy for quarter-hour bookings or shift-based scheduling.

DateFormat controls how each of the two dates is rendered (and parsed back, when text input is allowed), while ValueFormat is the template that composes them into the single string shown in the input; {0} is the start date and {1} is the end date. When no DateFormat is provided the culture's short date pattern is used, extended with the time pattern whenever ShowTimePicker is enabled. An end date that has not been picked yet is rendered as ---, which NoDateText replaces with any wording of its own, both when the value is written out and when it is typed back in.

With AllowTextInput the input becomes editable and the typed text is parsed back into a range. The text must follow the ValueFormat template with both dates written in the DateFormat pattern; an unparsable value raises the validation error of InvalidErrorMessage. Leaving the end date as --- (or empty) keeps the range open-ended, and a reversed pair is swapped automatically. A typed range is also validated against every restriction the calendar enforces (MinDate, MaxDate, MinRange, MaxRange, the disabled days and ExcludeDisabledDates), so no range that could not be picked from the day grid can slip in through the text input.

The value of the component is a BitDateRangePickerValue holding a nullable StartDate and EndDate, so a half-picked range is representable. Use @bind-Value for two-way binding, or DefaultValue together with the OnChange callback for the uncontrolled mode.

By default, BitDateRangePicker picks the current culture. But you can provide your own instance of CultureInfo for any custom culture. The whole calendar follows it: the calendar system (Gregorian, Persian, Hijri…), the month and day names, the first day of the week, the AM/PM designators and the text direction.
You also can use our CultureInfoHelper class or check its code to see how to create a custom culture.

TimeZone specifies the time zone used to interpret and display the selected dates and times, so the offsets of the produced DateTimeOffset values belong to that zone instead of the local one.
Remember using this feature in different runtimes needs more investigations, for example, there are different data available based on the OS the code is running on or different settings enabled for the project (like InvariantTimezone in the project file, more info).

Standalone renders the calendar inline instead of inside a callout, dropping the input and the overlay. It suits filter panels, dashboards and any layout where the calendar should always be visible; the value binding, the constraints and the time picker all behave exactly as they do in the drop-down mode.

ReadOnly keeps the component fully rendered and navigable - the callout still opens and the months can still be browsed - but blocks every change: days cannot be selected, the time spinners are inert, the typed text is ignored and the clear button is not rendered. Unlike IsEnabled="false", the value is still submitted with the form.

Every cell of the calendar can be rendered by the application. LabelTemplate and IconTemplate replace the label and the input's icon, while DayCellTemplate and MonthCellTemplate receive the date of the cell being rendered and YearCellTemplate receives its year number, so each can decorate the cell with badges, colors or any other markup.

Responsive turns the callout into a full-width panel that slides down from the top of the screen on small viewports, enlarging the day cells and the time inputs for touch, and letting the panel be dismissed with a swipe. On wider screens the component keeps its regular drop-down layout.

Inside an EditForm the DateRangePicker participates in the data annotations validation like any other input: the field is marked invalid until the bound BitDateRangePickerValue satisfies the model's rules, and the messages are reported through ValidationMessage. A custom validation attribute is the natural place for range rules that the calendar itself cannot express.

The Color parameter applies one of the theme colors to the accented parts of the calendar: the today cell, the two ends of the selected range, the highlighted current month and the active AM/PM button.