Telerik UI for ASP.NET Core DateTimePicker Overview

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Telerik REPL
HtmlHelper
TagHelper
Files:
index.cshtml
IndexController.cs
Index_TagHelper.cshtml

Also available for:

CLIENT-SIDE API HTML HELPER API
devcraft ninja image

The DateTimePicker component 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.

Description

The Telerik UI for ASP.NET Core DateTimePicker component allows you to manually input date and time or to select them from a dropdown calendar and a list of time options. The DateTimePicker component supports templates, configurable options for minimum and maximum date and time, start view and the depth of the navigation.

The current example displays a generic use-case scenario for a DateTimePicker component which aims to demonstrate a natural feel and seamless navigation for the end users.

The Telerik UI for ASP.NET Core DateTimePicker component is part of Telerik UI for ASP.NET Core, a professional-grade UI library with 110+ components for building modern and feature-rich applications. The UI for ASP.NET MVC DateTimePicker is a server-side wrapper for the Kendo UI for jQuery DateTimePicker component and supports an HtmlHelper mode.

This DateTimePicker example is part of a unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik UI for ASP.NET MVC components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Functionality and Features

  • Disabled dates—You can disable certain DateTimePicker days which are not intended to be selected by the end user.
  • Interval—The DateTimePicker component allows you to specify the interval between the values in the time view of the popup list.
  • Selected dates—You can specify 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 initial view it renders and define the navigation depth of the views.
  • Start and End time for the TimeView—The DateTimePicker enables you to set the start and end time of the TimeView
  • Validation—You can configure custom validation that aims to keep its input value unchanged even when the typed date is invalid.
  • Date and time formatting—The DateTimePicker allows you to define its date and time formatting.
  • Calendar types—You can alter the default behavior of the DateTimePicker and simulate a different calendar type.
  • 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—You can explicitly set the DateInput as the input element in a DateTimePicker.
  • Templates—Customize both the cell template in the Month view and footer of the calendar.
  • Globalization—Translation of component messages (localization) with adapting them to specific cultures (internationalization and right-to-left support).
  • Accessibility—Accessibility by screen readers while providing WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.

Additional Apps

This DateTimePicker example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Support & Learning Resources

Additional Resources