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
telerik-blazor.min.jsfile to your main index file. For a client-side Blazor app, it iswwwroot/index.html, and for a server-side Blazor app it is~/Pages/Index.cshtml. For example:HTML
<head> . . . <script src="https://kendo.cdn.telerik.com/blazor/1.1.0/telerik-blazor.min.js" defer></script> </head>Make sure that the version in the URL matches the version of the Telerik Blazor package used in your project.
add the
TelerikDatePickertag
Basic date picker with its key features, and ValueChanged event handling
.NET Core Issue 8385 is preventing the ValueChanged handler from working at the moment. The code below will work as soon as Microsoft release a fix for this problem. Until then, you may get compilation issue due to the handler presence. We strive to follow best practices and future-proof our components, which is why we are using this approach even though it does not work yet.
@using Telerik.Blazor.Components.DatePicker
<TelerikDatePicker bind-Value="@datePickerValue" ValueChanged="@ValueChanged"></TelerikDatePicker>
<br />The selected date is: @selectedDate?.ToShortDateString()
@functions {
DateTime datePickerValue = DateTime.Now;
private DateTime? selectedDate;
protected void ValueChanged(DateTime newValue)
{
selectedDate = newValue;
//you can, alternatively, use the datePickerValue variable because it is bound
}
}
Component namespace and reference
@using Telerik.Blazor.Components.DatePicker
<TelerikDatePicker ref="@theDatePicker">
</TelerikDatePicker>
@functions {
Telerik.Blazor.Components.DatePicker.TelerikDatePicker theDatePicker;
}
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 toCalendarView.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 to28px. See the Dimensions article. -
Format- Specifies the format of the DateInput of the DatePicker. Defaults toyyyy-MM-dd. -
PopupHeight- Defines the height of the DatePicker's Popup. Defaults to280px. -
PopupWidth- Defines the width of the DatePicker's Popup. Defaults to320px. -
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 to280px. - 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.