ASP.NET MVC DateTimePicker Overview

The Telerik UI DateTimePicker HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI DateTimePicker widget.

The DateTimePicker allows the user to select a value from a calendar, a time drop-down list, or through direct input.

• Demo page for the DateTimePicker HtmlHelper

Initializing the DateTimePicker

The following example demonstrates how to define the DateTimePicker.

The DateTimePicker copies any styles and CSS classes from the input element to the wrapper element.

Razor

    @(Html.Kendo().DateTimePicker()
        .Name("dateTimePicker")
    )

Basic Configuration

The DateTimePicker configuration options are passed as attributes.

Razor

    @(Html.Kendo().DateTimePicker()
        .Name("end")
        .Value(DateTime.Today)
        .Min(DateTime.Today)
    )

The ParseFormats option is of type string[] and can be assigned either by a ViewBag property or by a property of the model.

Razor

    @(Html.Kendo().DateTimePicker()
        .Name("datetimepicker")
        .ParseFormats(new string[] { "MMMM yyyy", "MMMM" })
    )

Model Binding

The DateTimePicker component respects DataAnnotations when the DateTimePickerFor(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().DateTimePickerFor(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 DateTimePicker allows you to disable specific days that shouldn't be selected by the end user, such as weekends and national holidays.
Component Type	The DateTimePicker allows you to choose between two rendering options: standard and modern appearance.
Selected dates	The DateTimePicker allows you to render a pre-selected date and also define the minimum and maximum dates it displays.
Start view and navigation depth	The DateTimePicker enables you to set the rendered initial view and define the navigation depth of the views.
Interval	You can configure the interval between the time values.
Floating Labels	You can explicitly set a floating label which floats above the field and remains visible.
Validation	The DateTimePicker does not automatically update the typed text when the typed text is invalid. Such changes in the input value may lead to unexpected behavior.
Date and time formatting	The DateTimePicker allows you to define its date and time formatting.
Calendar types	By default, the DatePicker works with Date objects which support only the Gregorian calendar.
Week number column	The DateTimePicker provides options for rendering a column which displays the number of the weeks within the current Month view.
Templates	The DateTimePicker provides options for using and customizing its templates.
Globalization	The DateTimePicker comes with globalization support that allows you to use the component in apps all over the world.
Accessibility	The DateRangePicker is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
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 DateTimePicker
• Basic Usage of the DateTimePicker HtmlHelper for ASP.NET MVC (Demo)

See Also

• Using the API of the DateTimePicker for ASP.NET MVC (Demo)
• Knowledge Base Section