DatePicker component

<DatePicker> is a fully featured date selection component that lets users select a date. DatePicker is based on a flatpickr datetime picker and as such is not a native date input element. That means that unlike DateEdit which will render type="date", DatePicker will render type="text" in the DOM.

Basic example

<DatePicker TValue="DateTime?" />

Add icon

To add icon you can combine DatePicker with an Addon.
    <Addon AddonType="AddonType.Body">
        <DatePicker @ref="@datePicker" TValue="DateTime?" />
    <Addon AddonType="AddonType.End">
        <Button Color="Color.Light" Clicked="@(()=>datePicker.ToggleAsync())">
            <Icon Name="IconName.CalendarDay" />
    DatePicker<DateTime?> datePicker;

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?[] {

Range example

Select a range of dates using the range calendar.
<DatePicker TValue="DateTime?" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Range" />

Multiple example

It is possible to select multiple dates.
<DatePicker TValue="DateTime?" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple" />


Native Flatpickr component has some special rules regarding the date format string. To make it easier to use we tried to map the flatpickr custom formatter to behave as close to .Net date format string. Bellow you can find the list of available and supported mappings between Blazorise and flatpickr.

.Net value Flatpickr value Description
d j Day of the month without leading zeros, 1 to 31.
dd d Day of the month, 2 digits with leading zeros, 01 to 31.
ddd D A textual representation of a day, Mon through Sun.
dddd l A full textual representation of the day of the week, Sunday through Saturday.
M n Numeric representation of a month, without leading zeros, 1 through 12.
MM m Numeric representation of a month, with leading zero, 01 through 12.
MMM M A short textual representation of a month, Jan through Dec.
MMMM F A full textual representation of a month, January through December.
y y A two digit representation of a year. 99 or 03.
yy y -||-
yyy Y A full numeric representation of a year, 4 digits, 1999 or 2003.
yyyy Y -||-
yyyy Y -||-
H H Hours (24 hours), 00 to 23.
HH H -||-
h h Hours, 1 to 12.
hh G Hours, 2 digits with leading zeros, 01 to 12.
m i Minutes, 00 to 59.
mm i -||-
s s Seconds, 0, 1 to 59.
ss S Seconds, 2 digits, 00 to 59.
t K AM/PM designator.
tt K -||-

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.

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


Name Description Type Default
Date Gets or sets the input date value. TValue default
DateChanged Occurs when the date has changed. EventCallback<TValue>
InputMode Hints at the type of data that might be entered by the user while editing the element or its contents. DateInputMode Date
SelectionMode Defines the mode in which the dates can be selected. DateInputSelectionMode Single
Min The earliest date to accept. DateTimeOffset? null
Max The latest date to accept. DateTimeOffset? null
Pattern The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission. string null
Placeholder Sets the placeholder for the empty date. string null
Step The step attribute specifies the legal day intervals to choose from when the user opens the calendar in a date field. int 1
FirstDayOfWeek Defines the first day of the week in the calendar. DayOfWeek Sunday
DisplayFormat Defines the display format of the date input. string null
TimeAs24hr Displays time picker in 24 hour mode without AM/PM selection when enabled. bool false
DisabledDates List of disabled dates that the user should not be able to pick. IEnumerable<TValue> null