ASP.NET MVC DatePicker Overview

Telerik UI for ASP.NET MVC Ninja image

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.

Next Steps

See Also

In this article