HxInputDate #

Date picker. Form input component for entering a date.

Basic usage #

SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8
<HxInputDate Label="Date" @bind-Value="@value" />

@code {
    public DateTime value { get; set; }
}

Calendar icon #

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

SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8

Clear button in calendar #

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

SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8

Sizes #

SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8
SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8
SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8

Dropdown calendar 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 calendar values by setting MinDate and/or MaxDate.

SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8

Calendar date customization #

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

SunMonTueWedThuFriSat
28
29
30
31
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
1
2
3
4
5
6
7
8

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 calendar.
Default customization is configurable with HxInputDate.Defaults.
CalendarIcon IconBase Optional icon to display within the input. Use HxInputDate.Defaults to set the icon for the whole project.
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.
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.
InputGroupCssClass string Custom CSS class to render with input-group span.
InputGroupEndTemplate RenderFragment Input-group at the end of the input.
InputGroupEndText string Input-group at the end of the input.
InputGroupStartTemplate RenderFragment Input-group at the beginning of the input.
InputGroupStartText string Input-group at the beginning of the input.
InputSize InputSize? Size of the input.
Label string Label text.
LabelCssClass string Custom CSS class to render with the label.
LabelTemplate RenderFragment Label content.
LabelType LabelType? Label type.
MaxDate DateTime? Last date selectable from the dropdown calendar.
Default is 31.12.2099 (configurable from HxInputDate.Defaults).
MinDate DateTime? First date selectable from the dropdown calendar.
Default is 1.1.1900 (configurable from HxInputDate.Defaults).
ParsingErrorMessage string Gets or sets the error message used when displaying a parsing error. Used with String.Format(...), {0} is replaced by Label property, {1} name of bounded property.
Placeholder string Placeholder for the input.
PredefinedDates IEnumerable<InputDatePredefinedDatesItem> Predefined dates to be displayed.
Settings InputDateSettings Set of settings to be applied to the component instance (overrides HxInputDate.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).
ShowPredefinedDates bool? When enabled (default is true), shows predefined days (from PredefinedDates, e.g. Today).
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 TValue Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<TValue> A callback that updates the bound value.
ValueExpression Expression<Func<TValue>> 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 InputDateSettings Application-wide defaults for the HxInputDate.

CSS variables #

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