HxInputDate

Date picker. Form input component for entering a date.

Basic usage

<HxInputDate Label="Date" @bind-Value="@value" />

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

Calendar icon

Optional icon can be added using CalendarIcon parameter:

Buttons in calendar

The Clear and OK buttons in calendar can be hidden by setting ShowCalendarButtons="false".

Sizes

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.

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="...").

API

Parameters

Name Type Description
UseDefaultDates bool When true, uses default dates (from DefaultDates, e.g. Today).
CustomDates IEnumerable<DateItem> Custom date ranges. When UseDefaultDates is true, these items are used with default items.
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.
InputSize InputSize?
CalendarIcon IconBase Optional icon to display within the input. Use HxInputDate.Defaults to set the icon for the whole project.
ShowCalendarButtons bool? Indicates whether the Clear and OK buttons in calendar should be visible.
Default is true (configurable in HxInputDate.Defaults).
MinDate DateTime? First date selectable from the dropdown calendar.
Default is 1.1.1900 (configurable from HxInputDate.Defaults).
MaxDate DateTime? Last date selectable from the dropdown calendar.
Default is 31.12.2099 (configurable from HxInputDate.Defaults).
CalendarDateCustomizationProvider CalendarDateCustomizationProviderDelegate Allows customization of the dates in dropdown calendar.
Default customization is configurable with HxInputDate.Defaults.
Label string Label to render before input (or after input for Checkbox).
LabelTemplate RenderFragment Label to render before input (or after input for Checkbox).
Hint string Hint to render after input as form-text.
HintTemplate RenderFragment Hint to render after input as form-text.
CssClass string Custom CSS class to render with wrapping div.
LabelCssClass string Custom CSS class to render with the label.
InputCssClass string Custom CSS class to render with the input element.
ShowValidationMessage bool When false, validation message is not rendered. Default is true.
GenerateChip bool When true, HxChipGenerator is used to generate chip item(s). Default is true.
ChipTemplate RenderFragment Chip template.
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.
AdditionalAttributes IReadOnlyDictionary<string, object>
Value DateTime
ValueExpression Expression<Func<DateTime>>
DisplayName string

Event Callbacks

Name Type Description
ValueChanged EventCallback<DateTime>

Methods

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

Static properties

Property Type Description
DefaultDates List<DateItem> Default dates offered in associated menu (e.g. Today, Yesterday, etc.).
An unhandled error has occurred. Reload 🗙