ASP.NET Core DateInput Overview

The DateInput 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.

Download Free Trial

The Telerik UI DateInput TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI DateInput widget.

The DateInput represents an input field that recognizes and formats scheduling values such as dates. It provides separate sections for days, months, years, hours, and minutes, and also supports the customization of date and time formats.

• Demo page for the DateInput HtmlHelper

• Demo page for the DateInput TagHelper

Basic Configuration

The following example demonstrates the basic configuration for the DateInput.

    @(Html.Kendo().DateInput()
        .Name("dateinput") // The name of the DateInput is mandatory. It specifies the "id" attribute of the widget.
        .Value(DateTime.Today) // Set the value of the DateInput.
    )

    <kendo-dateinput name="dateinput" value="DateTime.Today">
    </kendo-dateinput>

Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.

DateOnly and TimeOnly compatability

As of the 2024 Q4 Release the ASP.NET Core DateInput is compatible with the DateOnly and TimeOnly types. Following this release you can also set the value of the component to a DateOnly or a TimeOnly property:

    @(Html.Kendo().DateInput().Name("dateOnly").Value(new DateOnly(2024,5,6)))
    @(Html.Kendo().DateInput().Name("timeOnly").Value(new TimeOnly(10,20,30)))

    <kendo-dateinput name="dateOnly" value="new DateOnly(2024,5,6)"></kendo-dateinput>
    <kendo-dateinput name="timeOnly" value="new TimeOnly(10,20,30)"></kendo-dateinput>

Functionality and Features

• Appearance—You are able to customize the appearance of the DateInput by configuring its size, fill mode, and border radius.
• Floating Label—You can configure a floating label placeholder text for the DateInput. This label will float above that field and remain visible once the user starts interacting with that input.
• Globalization—You can employ globalization which adjusts the date formats (localization) and adapts the component to specific cultures (internationalization and right-to-left support).
• Accessibility—The DateInput is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
• 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 DateInput

• Basic Usage of the DateInput HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the DateInput TagHelper for ASP.NET Core (Demo)

• DateInput in Razor Pages

See Also

• Using the API of the DateInput HtmlHelper for ASP.NET Core (Demo)
• Client-Side API of the DateInput
• Server-Side API
• Knowledge Base Section