HAVIT Blazor

HxInputDateRange #

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

Basic usage #

SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
<HxInputDateRange Label="Absence" @bind-Value="@value" />

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

Calendar icon #

An optional icon can be added using the CalendarIcon parameter.
You can set the icon for all instances of HxInputDateRange by setting the HxInputDateRange.Defaults.CalendarIcon static property.

SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Hide Clear button in calendars #

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

SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Predefined date ranges #

You can add predefined date ranges with the PredefinedDateRanges parameter.

SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

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

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

MinDate, MaxDate #

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

SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Calendar date customization #

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

SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Calendar time zone #

You can customize the time zone of the dropdown calendar by supplying a custom TimeProvider. See HxCalendar time zones for more details.

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 the dropdown calendars.
The default customization is configurable with Defaults.
CalendarIcon IconBase
ChipTemplate RenderFragment The chip template.
CssClass string The custom CSS class to render with the wrapping div.
DisplayName string Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
Enabled bool? When null (default), the Enabled value is received from the cascading FormState. When the value is false, the input is rendered as disabled. To set multiple controls as disabled, use HxFormState.
FromCalendarDisplayMonth DateTime The month to display in the from calendar when no start date is selected.
FromParsingErrorMessage string Gets or sets the error message used when displaying a "from" parsing error. Used with String.Format(...), {0} is replaced by the Label property, {1} is replaced by the name of the bounded property.
FromPlaceholder string Placeholder for the start-date input. If not set, localized default is used ("From" + localizations).
GenerateChip bool When true, HxChipGenerator is used to generate chip item(s). The default is true.
Hint string The hint to render after the input as form-text.
HintTemplate RenderFragment The hint to render after the input as form-text.
InputCssClass string The custom CSS class to render with the input element.
InputSize InputSize? Size of the input.
Label string The label text.
LabelCssClass string The custom CSS class to render with the label.
LabelTemplate RenderFragment The label content.
MaxDate DateTime? The last date selectable from the dropdown calendar.
The default is 31.12.2099 (configurable from Defaults).
MinDate DateTime? The first date selectable from the dropdown calendar.
The default is 1.1.1900 (configurable from Defaults).
PredefinedDateRanges IEnumerable<InputDateRangePredefinedRangesItem> Predefined dates to be displayed.
Settings InputDateRangeSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
ShowClearButton bool? Indicates whether the Clear button in the dropdown calendar should be visible.
The default is true (configurable in HxInputDate.Defaults).
ShowPredefinedDateRanges bool? When enabled (default is true), shows predefined days (from PredefinedDateRanges, e.g. Today).
TimeProvider TimeProvider TimeProvider is resolved in the following order:
1. TimeProvider from this parameter
2. Settings TimeProvider (configurable from Settings)
3. Defaults TimeProvider (configurable from Defaults)
ToCalendarDisplayMonth DateTime The month to display in the to calendar when no end date or start date is selected. It will default to FromCalendarDisplayMonth.
ToParsingErrorMessage string Gets or sets the error message used when displaying a "to" parsing error. Used with String.Format(...), {0} is replaced by the Label property, {1} is replaced by the name of the bounded property.
ToPlaceholder string Placeholder for the end-date input. If not set, localized default is used ("End" + localizations).
ValidationMessageMode ValidationMessageMode? Specifies how the validation message should be displayed.
The default is ValidationMessageMode.Regular, you can override the application-wide default for all inputs in 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.

Other properties #

Name Type Description
FromPlaceholderEffective string
ToPlaceholderEffective string

Methods #

Method Returns Description
FocusAsync() ValueTask

Static properties #

Property Type Description
Defaults InputDateRangeSettings Application-wide defaults for the HxInputDateRange component.
An unhandled error has occurred. Reload 🗙