ASP.NET Core DateTimePicker Overview
The DateTimePicker 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 DataSource TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI DataSource widget.
The DateTimePicker allows the user to select a value from a calendar, a time drop-down list, or through direct input.
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.
@(Html.Kendo().DateTimePicker()
.Name("dateTimePicker")
)
<kendo-datetimepicker name="dateTimePicker"></kendo-datetimepicker>
Basic Configuration
The DateTimePicker configuration options are passed as attributes.
@(Html.Kendo().DateTimePicker()
.Name("end")
.Value(DateTime.Today)
.Min(DateTime.Today)
)
<kendo-datetimepicker name="end" value="DateTime.Today"
min="DateTime.Today">
</kendo-datetimepicker>
The ParseFormats option is of type string[] and can be assigned either by a ViewBag property or by a property of the model.
@(Html.Kendo().DateTimePicker()
.Name("datetimepicker")
.ParseFormats(new string[] { "MMMM yyyy", "MMMM" })
)
@{
ViewBag.ParseDates = new string[] { "MMMM yyyy", "MMMM" };
}
<kendo-datetimepicker name="datetimepicker" parse-formats="ViewBag.ParseDates">
</kendo-datetimepicker>
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.
@(Html.Kendo().DateTimePickerFor(m=>m.MyDateTimeProperty))
<kendo-datetimepicker for="MyDateTimeProperty"
</kendo-datetimepicker>
[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. |
| 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. |
| 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. |
Next Steps
- Getting Started with the DateTimePicker
Basic Usage of the DateTimePicker HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the DateTimePicker TagHelper for ASP.NET Core (Demo)
- DateTimePicker in Razor Pages