Blazorise Date Picker API

Explore the Blazorise Date Picker API reference for parameters, events, methods, and related types.

For examples and usage guidance, see the Date Picker documentation.

API

Parameters

Parameter Description TypeDefault
AriaDescribedBy

Specifies the aria-describedby attribute value.

Remarks

When set, this value is rendered as-is and overrides help and validation message ids generated by Field and Validation.

string
AriaInvalid

Specifies the aria-invalid attribute value.

Remarks

When set, this value is rendered as-is and overrides the validation-derived aria-invalid state.

string
AriaLabelledBy

Specifies the aria-labelledby attribute value.

Remarks

When set, this value is rendered as-is. Some non-labelable controls can otherwise derive it automatically from a parent FieldLabel or FieldsLabel.

string
AriaRequired

Specifies the aria-required attribute value.

Remarks

When set, this value overrides the required-field state resolved from the parent Validation.

boolfalse
Autofocus

Set's the focus to the component after the rendering is done.

boolfalse
ChildContent

Specifies the content to be rendered inside this DatePicker.

RenderFragmentnull
Color

Sets the input text color.

ColorColor.Default
DefaultHour

Specifies the initial value of the hour element.

int12
DefaultMinute

Specifies the initial value of the minute element.

int0
Disabled

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

boolfalse
DisabledDates

List of disabled dates that the user should not be able to pick.

IEnumerablenull
DisabledDays

List of disabled days in a week that the user should not be able to pick.

IEnumerable<DayOfWeek>null
DisableMobile

Prevents the browser's native picker from being used on mobile devices.

booltrue
DisplayFormat

Specifies the display format of the date input using the picker format syntax supported by earlier versions.

Remarks

Week mode additionally supports w, ww, and wo for the week number and its English ordinal form.

string
EnabledDates

List of enabled dates that the user should be able to pick.

IEnumerablenull
Feedback

Placeholder for validation messages.

RenderFragmentnull
FirstDayOfWeek

Specifies the first day of the week used for date calculations.

Remarks

In week mode this controls the visual calendar layout. Selected values continue to represent ISO Monday-to-Sunday weeks.

DayOfWeekDayOfWeek.Monday
Inline

Display the calendar in an always-open state with the inline option.

boolfalse
InputFormat

Specifies the input format mask of the date input using Blazorise's InputMask integration.

Remarks

Week mode supports the w and ww week-number tokens.

string
InputMode

Hints at the type of data that might be entered by the user while editing the element or its contents.

Possible values:Date, DateTime, Month, Week

DateInputModeDateInputMode.Date
Intent

Sets the input text intent.

Intentnull
Max

The latest date to accept. Updating this value does not change the selected date, even if it exceeds the new maximum.

DateTimeOffset?null
Min

The earliest date to accept. Updating this value does not change the selected date, even if it falls below the new minimum.

DateTimeOffset?null
OnScreenKeyboard

Enables the on-screen keyboard for this input component. When not explicitly set, the global accessibility option is used.

boolfalse
OnScreenKeyboardEnterKeyBehavior

Specifies how the on-screen keyboard enter key should behave for this input component.

Possible values:Default, NewLine, Submit, Hide, KeyDown

OnScreenKeyboardEnterKeyBehaviorOnScreenKeyboardEnterKeyBehavior.Default
OnScreenKeyboardLayout

Specifies the on-screen keyboard layout for this input component. When not explicitly set, the global accessibility option is used.

Possible values:Text, Numeric, Decimal, Email, Url, Telephone

OnScreenKeyboardLayoutOnScreenKeyboardLayout.Text
OnScreenKeyboardShowMode

Gets or sets how the on-screen keyboard is shown for this input.

Possible values:Default, Focus, Manual

OnScreenKeyboardShowModeOnScreenKeyboardShowMode.Default
OpenTrigger

Defines which interactions can open the calendar menu.

Possible values:None, Click, Focus, OpenKeys, All

PickerOpenTriggerdefault(PickerOpenTrigger)
Pattern

The pattern attribute specifies a regular expression that the input element's value is checked against on form validation.

string
Placeholder

Sets the placeholder for the empty text.

string
Plaintext

Sets the class to remove the default form field styling and preserve the correct margin and padding.

boolfalse
RangeSeparator

Overrides the range separator that is used to separate date values when SelectionMode is set to Range.

string
ReadOnly

Add the readonly boolean attribute on an input to prevent modification of the input’s value.

boolfalse
SelectionMode

Specifies the mode in which the dates can be selected.

Possible values:Single, Range, Multiple

DateInputSelectionModeDateInputSelectionMode.Single
ShowClearButton

Determines whether to show the clear button in the calendar menu.

boolfalse
ShowTodayButton

Determines whether to show the today button in the calendar menu.

boolfalse
ShowWeekNumbers

Determines whether the calendar menu will show week numbers.

Remarks

Week numbers are always shown when InputMode is Week.

boolfalse
Size

Sets the size of the input control.

Size?null
StaticPicker

If enabled, the calendar menu will be positioned as static.

booltrue
TabIndex

If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.

int?null
TimeAs24hr

Displays time picker in 24 hour mode without AM/PM selection when enabled.

boolfalse
Value

Specifies the value inside the input field.

TValuenull
ValueExpression

Specifies an expression that identifies the input value.

Expression<Func<TValue>>null

Events

Event Description Type
Blur

The blur event fires when an element has lost focus.

EventCallback<FocusEventArgs>
CustomValidationValue

Used to provide custom validation value on which the validation will be processed with the Validator handler.

Remarks

Should be used carefully as it's only meant for some special cases when input is used in a wrapper component, like Autocomplete or SelectList.

Func<TValue>
FocusIn

Notifies when the input box gains focus.

EventCallback<FocusEventArgs>
FocusOut

Notifies when the input box loses focus.

EventCallback<FocusEventArgs>
KeyDown

Notifies when a key is pressed down while the control has focus.

EventCallback<KeyboardEventArgs>
KeyPress

Notifies when a key is pressed while the control has focus.

EventCallback<KeyboardEventArgs>
KeyUp

Notifies when a key is released while the control has focus.

EventCallback<KeyboardEventArgs>
OnFocus

Notifies when the input box gains or loses focus.

EventCallback<FocusEventArgs>
ValueChanged

Occurs after value has changed.

EventCallback<TValue>

Methods

Method DescriptionReturnParameters
CloseAsync Closes the calendar dropdown. ValueTask
OpenAsync Opens the calendar dropdown. ValueTask
ToggleAsync Shows/opens the calendar if its closed, hides/closes it otherwise. ValueTask
Select Select all text in the underline component. Taskbool focus
ShowOnScreenKeyboard Shows the on-screen keyboard for this input. Taskbool focus
Focus Sets the focus on the underline element. Taskbool scrollToElement
Revalidate Forces the Validation (if any is used) to re-validate with the new custom or internal value. Task
On this page