HAVIT Blazor

HxInputDate #

Date picker. Form input component for entering a date.

Basic usage #

SunMonTueWedThuFriSat
27
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
<HxInputDate Label="Date" @bind-Value="@value" />

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

Calendar icon #

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

SunMonTueWedThuFriSat
27
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

Clear button in calendar #

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

SunMonTueWedThuFriSat
27
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

Sizes #

SunMonTueWedThuFriSat
27
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
SunMonTueWedThuFriSat
27
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
SunMonTueWedThuFriSat
27
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

Internalization #

HxInputDate fully respects CultureInfo.CurrentCulture and CultureInfo.CurrentUiCulture. Based on their settings, it formats the date and displays month names, among other things.

For example, if your application is running in a cs-CZ culture, the date will be formatted as dd.MM.yyyy and the month names will be in Czech.

See Globalization and localization in official ASP.NET Core Blazor documentation for more details on how to set culture in you application.

Dropdown calendar customization #

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

SunMonTueWedThuFriSat
27
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

Calendar date customization #

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

SunMonTueWedThuFriSat
27
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

Calendar time zone #

You can customize the dropdown calendar time zone 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 calendar.
The default customization is configurable with Defaults.
CalendarDisplayMonth DateTime Default month to display in dropdown calendar when there is no Value.
CalendarIcon IconBase Optional icon to display within the input. Use Defaults to set the icon for the whole project.
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.
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.
InputGroupCssClass string Custom CSS class to render with the input-group span.
InputGroupEndTemplate RenderFragment The input-group at the end of the input.
InputGroupEndText string The input-group at the end of the input.
InputGroupStartTemplate RenderFragment The input-group at the beginning of the input.
InputGroupStartText string The input-group at the beginning of the input.
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.
LabelType LabelType? Label type.
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).
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 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 Defaults).
ShowPredefinedDates bool? When enabled (default is true), shows predefined days (from PredefinedDates, 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)
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 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

Static properties #

Property Type Description
Defaults InputDateSettings Application-wide defaults for the HxInputDate.
An unhandled error has occurred. Reload 🗙