Kendo UI Docs

Complete Kendo UI Documentation
Get Kendo UI

Getting Started

Get Kendo UI

TimePicker

Edit this doc

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

Getting Started

Here is how to configure a simple Kendo TimePicker:

  1. Make sure you have followed all the steps from the Introduction help topic.

  2. Create a new action method which renders the view:

    public ActionResult Index()
{
    return View();
}

  3. Add a timepicker:

    • WebForms

      <%: Html.Kendo().TimePicker()
        .Name("timepicker") //The name of the timepicker is mandatory. It specifies the "id" attribute of the widget.
        .Min(new DateTime(2010, 1, 1, 10, 0, 0)) //Set min time of the timepicker
        .Max(new DateTime(2010, 1, 1, 20, 0, 0)) //Set min date of the timepicker
        .Value(DateTime.Now) //Set the value of the timepicker
%>

    • Razor

      @(Html.Kendo().TimePicker()
      .Name("timepicker") //The name of the timepicker is mandatory. It specifies the "id" attribute of the widget.
      .Min(new DateTime(2010, 1, 1, 10, 0, 0)) //Set min time of the timepicker
      .Max(new DateTime(2010, 1, 1, 20, 0, 0)) //Set min date of the timepicker
      .Value(DateTime.Now) //Set the value of the timepicker
)

Accessing an Existing TimePicker

You can reference an existing TimePicker instance via jQuery.data(). Once a reference has been established, you can use the API to control its behavior.

Accessing an existing TimePicker instance

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

Handling Kendo UI TimePicker events

You can subscribe to all events exposed by Kendo UI TimePicker:

WebForms - subscribe by handler name

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

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

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

Razor - subscribe by handler name

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

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

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

Razor - subscribe by template delegate

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

Troubleshooting

Display DateTimeOffset value in widget

The TimePicker widget supports DateTime structure. You will need to convert DateTimeOffset into DatePicker in order to show time correctly.

Client validation fails with invalid date

By default ASP.NET MVC project uses jQuery validate framework, which does not provide support for internationalized dates. In other words, every string which Date.parse cannot define as valid date will be reported as invalid. As extending open source libraries is beyond of our product, you will need to resolve this issue manually - check this link for more information. You can also use Kendo Validator, which supports validating internationalized dates.

Page rendered at 5/21/2013 7:22:14 PM UTC.

Back to Top