HxInputDateRange

Date range picker. Form input component for entering start date and end date.

Basic usage #

<HxInputDateRange Label="Absence" @bind-Value="@value" />

@code {
	private DateTimeRange value { get; set; }
}

Hide Clear button in calendars #

The Clear button in dropdown calendars can be hidden by setting ShowClearButton="false".

Predefined date ranges #

You can add predefined date ranges with PredefinedDateRanges parameter.

If you set HxInputDateRange.Defaults.PredefinedDateRanges default ranges for the whole application, you can hide them on individual instances with ShowPredefinedDateRanges="false".

Dropdown calendars customization #

You can change rendering of weekend days by defining your own CSS rule for .weekend class. The disabled days get .disabled class.

MinDate, MaxDate

You can limit the dropdown calendars (both From and To together) enabled dates by setting MinDate and/or MaxDate.

Calendars date customization

You can customize the dropdown calendars' dates with CalendarDateCustomizationProvider. You can disable individual dates (Enabled="false") or set specific CSS class (CssClass="...").

API

Parameters

Name Type Description
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
CalendarDateCustomizationProvider CalendarDateCustomizationProviderDelegate Allows customization of the dates in dropdown calendars.
Default customization is configurable with HxInputDateRange.Defaults.
ChipTemplate RenderFragment Chip template.
CssClass string Custom CSS class to render with wrapping div.
DisplayName string
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
FromParsingErrorMessage string Gets or sets the error message used when displaying an a "from" parsing error. Used with String.Format(...), {0} is replaced by Label property, {1} name of bounded property.
GenerateChip bool When true, HxChipGenerator is used to generate chip item(s). Default is true.
Hint string Hint to render after input as form-text.
HintTemplate RenderFragment Hint to render after input as form-text.
InputCssClass string Custom CSS class to render with the input element.
InputSize InputSize? Size of the input.
Label string Label text.
LabelCssClass string Custom CSS class to render with the label.
LabelTemplate RenderFragment Label content.
MaxDate DateTime? Last date selectable from the dropdown calendar.
Default is 31.12.2099 (configurable from HxInputDateRange.Defaults).
MinDate DateTime? First date selectable from the dropdown calendar.
Default is 1.1.1900 (configurable from HxInputDateRange.Defaults).
PredefinedDateRanges IEnumerable<InputDateRangePredefinedRangesItem> Predefined dates to be displayed.
Settings InputDateRangeSettings Set of settings to be applied to the component instance (overrides HxInputDateRange.Defaults, overriden by individual parameters).
ShowCalendarButtons bool? Indicates whether the Clear and OK buttons in calendar should be visible.
Default is true (configurable in HxInputDate.Defaults).
ShowClearButton bool? Indicates whether the Clear button in dropdown calendar should be visible.
Default is true (configurable in HxInputDate.Defaults).
ShowPredefinedDateRanges bool? When enabled (default is true), shows predefined days (from PredefinedDateRanges, e.g. Today).
ToParsingErrorMessage string Gets or sets the error message used when displaying an a "to" parsing error. Used with String.Format(...), {0} is replaced by Label property, {1} name of bounded property.
ValidationMessageMode ValidationMessageMode? Specifies how the validation message should be displayed.
Default is ValidationMessageMode.Regular, you can override application-wide default for all inputs in HxInputBase.Defaults.
Value DateTimeRange Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<DateTimeRange> A callback that updates the bound value.
ValueExpression Expression<Func<DateTimeRange>> An expression that identifies the bound value.

Methods

Method Returns Description
FocusAsync() ValueTask Gives focus to the input element.

Static properties

Property Type Description
Defaults InputDateRangeSettings Application-wide defaults for the HxInputDateRange.

CSS Variables

Name Description Default
--hx-input-date-range-dropdown-padding Padding of the dropdown. 1rem
--hx-input-date-range-calendar-margin-bottom Margin bottom of the calendar. 0
An unhandled error has occurred. Reload 🗙