TimePicker HtmlHelper Overview

The TimePicker HtmlHelper extension is a server-side wrapper for the Kendo UI TimePicker widget.

Getting Started

Configuration

Add the TimePicker.

Example
    @(Html.Kendo().TimePicker()
        .Name("timepicker") //The name of the TimePicker is mandatory. It specifies the "id" attribute of the widget.
        .Value(DateTime.Now) //Set the value of the TimePicker.
    )

Event Handling

You can subscribe to all TimePicker events.

By Handler Name

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

Example
    @(Html.Kendo().TimePicker()
          .Name("timepicker")
          .Events(e => e
                .Open("timepicker_open")
                .Close("timepicker_close")
                .Change("timepicker_change")
          )
    )
    <script>
        function timepicker_open(e) {
            //Handle the open event.
        }

        function timepicker_close(e) {
            //Handle the close event
        }

        function timepicker_change(e) {
            //Handle the change event.
        }
    </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

    @(Html.Kendo().TimePicker()
          .Name("timepicker")
          .Events(e => e
              .Open(@<text>
                function(e) {
                    //Handle the open event inline.
                }
              </text>)
              .Change(@<text>
                function(e) {
                    //Handle the change event inline.
                }
                </text>)
          )
    )

Reference

Existing Instances

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

Example
    // Put this after your Kendo UI TimePicker for ASP.NET Core declaration.
    <script>
        $(function() {
            //Notice that the Name() of the TimePicker is used to get its client-side instance.
            var timepicker = $("#timepicker").data("kendoTimePicker");
        });
    </script>

See Also

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