ASP.NET MVC DatePicker Overview

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.

• Demo page for the DatePicker HtmlHelper

Basic Configuration

The following example demonstrates the basic configuration for the DatePicker.

Razor

    @(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.

Razor

    @(Html.Kendo().DatePickerFor(m=>m.MyDateTimeProperty))

C#

    [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.

Next Steps

• Getting Started with the DatePicker
• Basic Usage of the DatePicker HtmlHelper for ASP.NET MVC (Demo)

See Also

• Using the API of the DatePicker HtmlHelper for ASP.NET MVC (Demo)
• Server-Side API
• Knowledge Base Section