Date Picker Overview

The Date Picker component allows the user to choose a date from a visual list (calendar) or to type it into a date input that can accept only dates. You can control the format shown in the input, how the user navigates through the calendar, and dates the user cannot select.

To use a Telerik Date Picker for Blazor, add the TelerikDatePicker tag.

Basic date picker with namespace and reference

@using Telerik.Blazor.Components.DatePicker

<TelerikDatePicker @bind-Value="datePickerValue" @ref="theDatePicker"></TelerikDatePicker>

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

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

    Telerik.Blazor.Components.DatePicker.TelerikDatePicker<DateTime> theDatePicker;
    // the type of the component depends on the type of the value
    // in this case it is DateTime, but it could be DateTime?
}

The Date Picker component exposes the following features:

• BottomView - Defines the bottommost view in the popup calendar to which the user can navigate to. Defaults to CalendarView.Month.
• DisabledDates - Specifies a list of dates that can not be selected.
• Enabled - Specifies whether typing in the input is allowed.
• Height - Defines the height of the DatePicker. Defaults to 28px. See the Dimensions article.
• Format - Specifies the format of the DateInput of the DatePicker. Defaults to yyyy-MM-dd. Read more in the Supported Formats article.
• PopupHeight - Defines the height of the DatePicker's Popup. Defaults to 280px.
• PopupWidth - Defines the width of the DatePicker's Popup. Defaults to 320px.
• Value - The current value of the input. Can be used for binding.
• View - Specifies the current view that will be displayed in the popup calendar.
• Width - Defines the width of the DatePicker. Defaults to 280px.
• Validation - see the Input Validation article.

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.

See Also

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