Blazorise DatePicker component

DatePicker is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay.

<DatePicker> is a fully featured date selection component that lets users select a date. Its calendar, keyboard navigation, and parsing are implemented in Blazor and C# without a third-party JavaScript picker. When InputFormat is defined, DatePicker continues to use Blazorise's existing InputMask integration for compatible caret-aware editing. Unlike DateInput, which renders type="date", DatePicker will render type="text" in the DOM.

Examples

Basic example

<DatePicker TValue="DateTime?" @bind-Value="@value" />

@code {
    DateTime? value;
}

Add icon

To add icon you can combine DatePicker with an Addon.

<Addons>
    <Addon AddonType="AddonType.Body">
        <DatePicker @ref="@datePicker" TValue="DateTime?" @bind-Value="@value" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <Button Color="Color.Light" Clicked="@(()=>datePicker.ToggleAsync())">
            <Icon Name="IconName.CalendarDay" />
        </Button>
    </Addon>
</Addons>

@code {
    DatePicker<DateTime?> datePicker;

    DateTime? value;
}

Disable dates

If you'd like to make certain dates unavailable for selection you can assign the DisabledDates parameter.

<DatePicker TValue="DateTime?" DisabledDates="@disabledDates" />

@code {
    DateTime?[] disabledDates = new DateTime?[] {
        DateTime.Now.AddDays(-1),
        DateTime.Now.AddDays(2),
    };
}

Enable dates

If you'd like to make only certain dates available for selection, you can assign the EnabledDates parameter.

<DatePicker TValue="DateTime?" EnabledDates="@enabledDates" />

@code {
    DateTime?[] enabledDates = new DateTime?[]{
        DateTime.Now.AddDays(-1),
        DateTime.Now.AddDays(2),
    };
}

Disable days

If you'd like to make only certain days in a week unavailable for selection you can assign the DisabledDays parameter.

<DatePicker TValue="DateTime?" DisabledDays="@disabledDays" />

@code {
    DayOfWeek[] disabledDays = new[]  {
        DayOfWeek.Saturday,
        DayOfWeek.Sunday,
    };
}

Range example

Select a range of dates using the range calendar.

<DatePicker @bind-Value="selectedDates" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Range" />

@code {
    IReadOnlyList<DateTime?> selectedDates;
}

Multiple example

It is possible to select multiple dates.

<DatePicker @bind-Value="selectedDates" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple" />

@code{
    IReadOnlyList<DateTime?> selectedDates;
}

Inline Calendar

To always show the calendar you just need to set Inline parameter.

<DatePicker TValue="DateTime?" @bind-Value="@value" Inline />

@code {
    DateTime? value;
}

Non-static

By default, the calendar menu will position statically. This means that it will also keep its position relative to the page when you scroll.

If you want to disable this behavior, you should assign the value false to the StaticPicker parameter.

<DatePicker TValue="DateTime?" @bind-Value="@value" StaticPicker="false" />

@code {
    DateTime? value;
}

Input mask

In this example, the user is prompted to enter a value in the format dd.MM.yyyy.

Notice that we have also defined a DisplayFormat parameter. This is needed so that after the user finish with the input mask we need to properly parse it using the same format.

<DatePicker TValue="DateTime?" @bind-Value="@value" InputFormat="dd.MM.yyyy" DisplayFormat="dd.MM.yyyy" />

@code {
    DateTime? value;
}

Week numbers

Use the ShowWeekNumbers parameter to toggle the visibility of week numbers in the calendar view.

When enabled, a column will appear on the left side of each row in the calendar showing the corresponding week number.

<DatePicker TValue="DateTime?" ShowWeekNumbers="true" />

Month selection

Set InputMode to DateInputMode.Month to select a month and year. The selected value is normalized to the first day of the month.

Select the year heading to navigate through years and decades, then select an item to return through the views to the month grid.

<DatePicker TValue="DateTime?"
            @bind-Value="@selectedMonth"
            InputMode="DateInputMode.Month"
            DisplayFormat="MMMM yyyy"
            Placeholder="Select month..."
            ShowTodayButton />

@code {
    DateTime? selectedMonth;
}

Week selection

Set InputMode to DateInputMode.Week to select complete Monday-to-Sunday weeks. Week numbers are shown automatically in this mode.

Bound values are normalized to the Monday that starts the selected week. By default, the input displays week values such as 2026-41st.

Week mode supports single, range, and multiple selection. FirstDayOfWeek changes the visual order of the calendar; when Sunday is displayed first, a selected week continues into the following row.

Single week

Week range

Multiple weeks

Sunday-first layout

<Field>
    <FieldLabel>Single week</FieldLabel>
    <FieldBody>
        <DatePicker TValue="DateTime?" @bind-Value="@selectedWeek" InputMode="DateInputMode.Week" Placeholder="Select week..." />
    </FieldBody>
</Field>
<Field>
    <FieldLabel>Week range</FieldLabel>
    <FieldBody>
        <DatePicker @bind-Value="@selectedWeekRange" InputMode="DateInputMode.Week" SelectionMode="DateInputSelectionMode.Range" Placeholder="Select week range..." />
    </FieldBody>
</Field>
<Field>
    <FieldLabel>Multiple weeks</FieldLabel>
    <FieldBody>
        <DatePicker @bind-Value="@selectedWeeks" InputMode="DateInputMode.Week" SelectionMode="DateInputSelectionMode.Multiple" Placeholder="Select weeks..." />
    </FieldBody>
</Field>
<Field>
    <FieldLabel>Sunday-first layout</FieldLabel>
    <FieldBody>
        <DatePicker TValue="DateTime?" @bind-Value="@sundayFirstWeek" InputMode="DateInputMode.Week" FirstDayOfWeek="DayOfWeek.Sunday" />
    </FieldBody>
</Field>

@code {
    DateTime? selectedWeek;
    IReadOnlyList<DateTime?> selectedWeekRange;
    IReadOnlyList<DateTime?> selectedWeeks;
    DateTime? sundayFirstWeek = new DateTime( 2026, 7, 15 );
}

Show buttons

Use the ShowTodayButton, or ShowClearButton parameters to toggle the visibility of the buttons in the calendar view.

When enabled, a row of buttons will appear at the bottom of the calendar allowing users to quickly navigate to today or clear the selected date.

<DatePicker TValue="DateTime?" ShowTodayButton ShowClearButton />

Default time

By default the time elements are set to 12:00. To change it use the DefaultHour and DefaultMinute parameters.

<DatePicker TValue="DateTime?" InputMode="DateInputMode.DateTime" DefaultHour="9" DefaultMinute="15" />

Formats

Display Format

DisplayFormat and InputFormat retain the .NET-style picker format syntax supported by earlier DatePicker versions. InputFormat is converted to the existing InputMask datetime format and used as the caret-aware typing mask. After the mask is completed, the committed value is presented using DisplayFormat.

For example, dd.MM.yyyy renders and accepts values such as 27.07.2026.

Display output and parsing preserve the format-token behavior from earlier DatePicker versions.

Best Practices

Show the Date Format

Use a placeholder or helper to show how the input should be formatted. For example, "12/6/2020" represents different dates for Americans and Europeans.

Helpers are preferable to placeholders, as they are always visible. Fields with placeholders are also less noticeable than empty fields, so they are susceptible to being skipped. Use placeholders when space is limited, for example when Date Picker is used as a filter in a data grid header.

Start date Format: DD/MM/YYYY

<Field>
    <FieldLabel>Start date</FieldLabel>
    <FieldBody>
        <DatePicker TValue="DateTime?" Placeholder="DD/MM/YYYY" />
    </FieldBody>
    <FieldHelp>Format: DD/MM/YYYY</FieldHelp>
</Field>

API

Parameters

Parameter	Description	Type	Default
`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.	`bool`	`false`
`Autofocus`	Set's the focus to the component after the rendering is done.	`bool`	`false`
`ChildContent`	Specifies the content to be rendered inside this DatePicker.	`RenderFragment`	`null`
`Color`	Sets the input text color.	`Color`	`Color.Default`
`DefaultHour`	Specifies the initial value of the hour element.	`int`	`12`
`DefaultMinute`	Specifies the initial value of the minute element.	`int`	`0`
`Disabled`	Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.	`bool`	`false`
`DisabledDates`	List of disabled dates that the user should not be able to pick.	`IEnumerable`	`null`
`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.	`bool`	`true`
`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.	`IEnumerable`	`null`
`Feedback`	Placeholder for validation messages.	`RenderFragment`	`null`
`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.	`DayOfWeek`	`DayOfWeek.Monday`
`Inline`	Display the calendar in an always-open state with the inline option.	`bool`	`false`
`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`	`DateInputMode`	`DateInputMode.Date`
`Intent`	Sets the input text intent.	`Intent`	`null`
`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.	`bool`	`false`
`OnScreenKeyboardEnterKeyBehavior`	Specifies how the on-screen keyboard enter key should behave for this input component. Possible values:`Default`, `NewLine`, `Submit`, `Hide`, `KeyDown`	`OnScreenKeyboardEnterKeyBehavior`	`OnScreenKeyboardEnterKeyBehavior.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`	`OnScreenKeyboardLayout`	`OnScreenKeyboardLayout.Text`
`OnScreenKeyboardShowMode`	Gets or sets how the on-screen keyboard is shown for this input. Possible values:`Default`, `Focus`, `Manual`	`OnScreenKeyboardShowMode`	`OnScreenKeyboardShowMode.Default`
`OpenTrigger`	Defines which interactions can open the calendar menu. Possible values:`None`, `Click`, `Focus`, `OpenKeys`, `All`	`PickerOpenTrigger`	`default(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.	`bool`	`false`
`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.	`bool`	`false`
`SelectionMode`	Specifies the mode in which the dates can be selected. Possible values:`Single`, `Range`, `Multiple`	`DateInputSelectionMode`	`DateInputSelectionMode.Single`
`ShowClearButton`	Determines whether to show the clear button in the calendar menu.	`bool`	`false`
`ShowTodayButton`	Determines whether to show the today button in the calendar menu.	`bool`	`false`
`ShowWeekNumbers`	Determines whether the calendar menu will show week numbers. Remarks Week numbers are always shown when InputMode is Week.	`bool`	`false`
`Size`	Sets the size of the input control.	`Size?`	`null`
`StaticPicker`	If enabled, the calendar menu will be positioned as static.	`bool`	`true`
`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.	`bool`	`false`
`Value`	Specifies the value inside the input field.	`TValue`	`null`
`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	Description	Return	Parameters
`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.	`Task`	`bool focus`
`ShowOnScreenKeyboard`	Shows the on-screen keyboard for this input.	`Task`	`bool focus`
`Focus`	Sets the focus on the underline element.	`Task`	`bool scrollToElement`
`Revalidate`	Forces the Validation (if any is used) to re-validate with the new custom or internal value.	`Task`