ASP.NET Core DatePicker Overview
The DatePicker is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI DatePicker TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI DatePicker widget.
The DatePicker enables the user to select a date from a calendar or through a direct input. It provides options for using custom templates for its Month view, setting minimum and maximum dates, a start view, and a depth for navigation.
Basic Configuration
The following example demonstrates the basic configuration for the DatePicker.
@(Html.Kendo().DatePicker()
.Name("datepicker") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the widget.
.Min(new DateTime(1900, 1, 1)) // Sets the min date of the DatePicker.
.Max(new DateTime(2099, 12, 31)) // Sets the max date of the DatePicker.
.Value(DateTime.Today) // Sets the value of the DatePicker.
)
<kendo-datepicker name="datepicker"
min="new DateTime(1900, 1, 1)"
max="new DateTime(2099, 12, 31)"
value="DateTime.Today">
</kendo-datepicker>
Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.
Model Binding
The DatePicker component respects DataAnnotations when the DatePickerFor(m=>m.Property) method is used. Besides the [Required] attribute, the [DisplayFormat] and [Range] attributes are also supported. The Format configuration will be set to the provided DisplayFormat and the Min and Max configurations will be set based on the range provided.
@(Html.Kendo().DatePickerFor(m=>m.MyDateTimeProperty))
<kendo-datepicker for="MyDateTimeProperty"
</kendo-datepicker>
[Required]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
[Range(typeof(DateTime), minimum:"01/01/2023", maximum:"31/12/2023")]
public DateTime MyDateTimeProperty{ get; set; }
DateOnly compatability
As of the 2024 Q4 Release the ASP.NET Core DatePicker is compatible with the DateOnly type. Following this release you can also set the value of the component to a DateOnly property:
@(Html.Kendo().DatePicker().Name("datePicker").Value(new DateOnly(2024,5,6)))
<kendo-datepicker name="datePicker" value="new DateOnly(2024,5,6)">
</kendo-datepicker>
Functionality and Features
| Feature | Description |
|---|---|
| Disabled dates | The DatePicker allows you to disable specific days that are not intended for user interaction. |
| Selected dates | The DatePicker allows you to render a pre-selected date upon loading. |
| Start view and navigation depth | You can also set the initial view the DatePicker renders and define the navigation depth of its views. |
| Validation | The DatePicker keeps its input value unchanged even when the typed date is invalid. |
| Calendar types | Even though, by default, the DatePicker supports only the Gregorian calendar, you can still work around this behavior and render other calendar types. |
| Week number column | The DatePicker provides options for rendering a column which displays the number of the weeks within the current Month view. |
| DateInput integration | The fluent integration between the DatePicker and the DateInput allows you to take advantage of the natively available features of both components. |
| Templates | You can customize the content and look and feel of the DatePicker by utilizing templates. |
| Accessibility | The DatePicker is accessible for screen readers, supports WAI-ARIA attributes, delivers keyboard shortcuts for faster navigation, and allows you to render it in a right-to-left direction. |
| Automatic Correction | You can configure whether the component will autocorrect the user's input when the Min and Max values are set. |
Next Steps
- Getting Started with the DatePicker
Basic Usage of the DatePicker HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the DatePicker TagHelper for ASP.NET Core (Demo)
- DatePicker in Razor Pages