DateInput Tag Helper Overview

The DateInput tag helper helps you configure the Kendo UI DateInput widget in ASP.NET Core applications.

Basic Usage

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

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

Configuration

The DateInput tag helper 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)
)

Event Handling

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 logic here
    }
</script>
@(Html.Kendo().DateInput()
    .Name("dateinput")
    .Events(e => e
    .Change("dateInput_change")
    )
)

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

Reference

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.

Example
//Put this after your Kendo UI DateInput for ASP.NET Core declaration.
<script>
    $(function() {
        //Notice that 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