DateInput TagHelper Overview

The Telerik UI DateInput TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI DateInput widget.

The DateInput represents an input field that recognizes and formats scheduling values such as dates.

Telerik UI for ASP.NET Core Ninja image

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.

Initializing the DateInput

The following example demonstrates how to define the DateInput by using the DateInput TagHelper.

<kendo-dateinput name="dateinput1"></kendo-dateinput>

Basic Configuration

The DateInput TagHelper configuration options are passed as attributes of the tag.

<kendo-dateinput name="dateinput1" format="MMMM yyyy" value="DateTime.Now">
</kendo-dateinput>
@(Html.Kendo().DateInput()
    .Name("dateinput1")
    .Format("MMMM yyyy")
    .Value(DateTime.Now)
)

Events

You can subscribe to all DateInput events.

The following example demonstrates how to subscribe to events by a handler name.

<kendo-dateinput name="dateinput" style='width: 100%;' on-change="onChangeHandler">
</kendo-dateinput>

<script>
    function onChangeHandler(e) {
        // Add your logic here.
    }
</script>
@(Html.Kendo().DateInput()
    .Name("dateinput")
    .Events(e => e
    .Change("dateInput_change")
    )
)

<script>
    function dateInput_change() {
            //Handle the change event
    }
</script>

Referencing Existing Instances

To reference an existing Kendo UI DateInput instance, use the jQuery.data() configuration option. Once a reference is established, use the DateInput client-side API to control its behavior.

// Place the following after the DateInput for ASP.NET Core declaration.
<script>
    $(function() {
        // The Name() of the DateInput is used to get its client-side instance.
        var dateInput = $("#dateinput").data("kendoDateInput");
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article