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.

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 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