ASP.NET MVC DatePicker Overview
The DatePicker is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper 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.
)
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))
[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; }
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. |