Date range picker. Form input component for entering start date and end date.
<HxInputDateRange Label="Absence" @bind-Value="@value" />
@code {
private DateTimeRange value { get; set; }
}
The Clear button in dropdown calendars can be hidden by setting ShowClearButton="false"
.
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"
.
You can change rendering of weekend days by defining your own CSS rule for .weekend
class.
The disabled days get .disabled
class.
You can limit the dropdown calendars (both From and To together) enabled dates by setting MinDate
and/or MaxDate
.
You can customize the dropdown calendars' dates with CalendarDateCustomizationProvider
. You can disable individual dates
(Enabled="false"
) or set specific CSS class (CssClass="...")
.
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 |
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 , overridden by individual parameters). |
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. |
Method | Returns | Description |
---|---|---|
FocusAsync() | ValueTask |
Gives focus to the input element. |
Property | Type | Description |
---|---|---|
Defaults | InputDateRangeSettings |
Application-wide defaults for the HxInputDateRange . |
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 |