Blazor Date Picker Overview

The Blazor Date Picker component allows the user to choose a date from a visual Gregorian calendar or type it into a date input that can accept only dates. You can control the date format of the input, how the user navigates through the calendar, and which dates the user cannot select.

The Date Picker component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor Date Picker

1. Use the TelerikDatePicker tag to add the component to your razor page.

2. Bind a DateTime object to the component

3. Optionally, provide custom Format, Min and Max values

Basic Date Picker with custom format, min and max

The selected date is: @datePickerValue.ToShortDateString()
<br />

<TelerikDatePicker @bind-Value="datePickerValue"
                   Format="dd MMMM yyyy"
                   Min="@Min" Max="@Max">
</TelerikDatePicker>

@code {
    DateTime datePickerValue { get; set; } = DateTime.Now;
    public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
    public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);
}

Increment Steps

The Date Picker enables the end users to change the selected value by clicking the rendered arrows. You can set the increment and decrement steps through the nested DatePickerSteps tag and its parameters. Read more about the Blazor Date Picker increment steps...

Events

The Blazor Date Picker generates events that you can handle and further customize its behavior. Read more about the Blazor Date Picker events....

Validation

You can ensure that the component value is acceptable by using the built-in validation. Read more about input validation....

Header Template

The DatePicker allows you to customize the rendering of the Calendar popup header. Learn more from the Header Template article.

Parameters

The Blazor Date Picker provides various parameters that allow you to configure the component:

Attribute	Type and Default Value	Description
BottomView	CalendarView CalendarView.Month	Defines the bottommost view in the popup calendar to which the user can navigate to.
DebounceDelay	int 150	Time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries.
DisabledDates	List<DateTime>	Specifies a list of dates that can not be selected.
Enabled	bool	Specifies whether typing in the input and clicking the button is allowed.
Format	string	Specifies the format of the DateInput of the DatePicker. Read more about supported data formats in Telerik DateInput for Blazor UI article.
Id	string	Renders as the id attribute on the <input /> element, so you can attach a <label for=""> to the input.
Min	DateTime	The earliest date that the user can select.
Max	DateTime	The latest date that the user can select.
Value	T	The current value of the input. Can be used for binding.
View	CalendarView	Specifies the current view that will be displayed in the popup calendar.
TabIndex	int?	Maps to the tabindex attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the Tab key.
Placeholder	string	Maps to the placeholder attribute of the HTML element. The Placeholder will appear if the component is bound to a nullable DateTime object - DateTime?. It will not be rendered if the component is bound to the default value of a non-nullable DateTime object. The Placeholder value will be displayed when the input is not focused. Once the user focuses it to start typing, the Format Placeholder (default or customized one) will override the Placeholder to indicate the format the date should be entered in.
ValidateOn	ValidationEvent enum ValidationEvent.Input	Configures the event that will trigger validation (if validation is enabled). Read more at Validation Modes for Simple Inputs.

The date picker is, essentially, a date input and a calendar and the properties it exposes are mapped to the corresponding properties of these two components. You can read more about their behavior in the respective components' documentation.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Date Picker:

Attribute	Type and Default Value	Description
Class	string	The custom CSS class rendered on the wrapping element.
PopupClass	string	An additional CSS class to customize the appearance of the Date Picker's dropdown.
PopupHeight	string	Defines the height of the DatePicker's Popup. Defaults to auto.
PopupWidth	string	Defines the width of the DatePicker's Popup. Defaults to auto.
Width	string	Defines the width of the DatePicker. Defaults to 280px.

You can find more options for customizing the Date Picker styling in the Appearance article.

Format Placeholder

The FormatPlaceholder parameter allows you to set custom strings as placeholders for each DateTime segment and is available for the following Telerik UI for Blazor components:

• DateInput
• DatePicker
• DateTimePicker
• DateRangePicker
• TimePicker

To set up the FormatPlaceholder, use the <*Component*FormatPlaceholder> nested tag. It allows you to set format placeholders by using the following parameters:

• Day
• Month
• Year
• Hour
• Minute
• Second
• Weekday

By default, the value for all parameters is null, which applies the full format specifier.

DatePicker Reference and Methods

Add a reference to the component instance to use the Date Picker's methods.

Method	Description
Close	Closes the Calendar popup.
FocusAsync	Focuses the Date Picker textbox.
NavigateTo	Navigates to a specified date and view. The method expects a DateTime and CalendarView arguments.
Open	Opens the Calendar popup.
Refresh	Re-renders the Calendar popup.

<TelerikDatePicker @ref="@Picker"
                   @bind-Value="@PickerValue"
                   Width="200px" />

<TelerikButton OnClick="@FocusPicker">Focus DatePicker</TelerikButton>
<TelerikButton OnClick="@OpenPicker">Open DatePicker</TelerikButton>

@code  {
    DateTime PickerValue { get; set; } = DateTime.Now;

    // the component type depends on the value type
    TelerikDatePicker<DateTime> Picker { get; set; }

    async Task FocusPicker()
    {
        await Picker.FocusAsync();
    }

    void OpenPicker()
    {
        Picker.Open();
    }
}

Next Steps

• Using the Date Picker Events

• Configuring the Date Picker Increment Steps

See Also

• Live Demo: Date Picker
• Input Validation
• Supported Input Date Formats
• API Reference