DatePicker HtmlHelper Overview

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

The DatePicker enables the user to enter or pick a date value.

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which renders the view.

    public ActionResult Index()
    {
        return View();
    }
    
  3. Add a DatePicker.

        <%: Html.Kendo().DatePicker()
            .Name("datepicker") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the DatePicker.
            .Min(new DateTime(1900, 1, 1)) // Set the min date of the DatePicker.
            .Max(new DateTime(2099, 12, 31)) // Set the min date of the DatePicker.
            .Value(DateTime.Today) // Set the value of the DatePicker.
        %>
    
        @(Html.Kendo().DatePicker()
            .Name("datepicker") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the DatePicker.
            .Min(new DateTime(1900, 1, 1)) // Set the min date of the DatePicker.
            .Max(new DateTime(2099, 12, 31)) // Set the min date of the DatePicker.
            .Value(DateTime.Today) // Set the value of the DatePicker.
        )
    

Events

You can subscribe to all DatePicker events. For a complete example on DatePicker events, refer to the demo on handling DatePicker events.

Handling by Handler Name

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

    <%: Html.Kendo().DatePicker()
        .Name("datepicker")
        .Events(e => e
            .Open("datepicker_open")
            .Close("datepicker_close")
            .Change("datepicker_change")
        )
    %>
    <script>
        function datepicker_open() {
            // Handle the open event.
        }

        function datepicker_close() {
            // Handle the close event.
        }

        function datepicker_change() {
            // Handle the change event.
        }
    </script>
    @(Html.Kendo().DatePicker()
        .Name("datepicker")
        .Events(e => e
            .Open("datepicker_open")
            .Close("datepicker_close")
            .Change("datepicker_change")
        )
    )
    <script>
        function datepicker_open() {
            // Handle the open event.
        }

        function datepicker_close() {
            // Handle the close event.
        }

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

Handling by Template Delegate

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

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

Referencing Existing Instances

To reference an existing DatePicker instance, use the jQuery.data() method and use the DatePicker client-side API to control its behavior.

// Place the following after theDatePicker for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the DatePicker is used to get its client-side instance.
        var datepicker = $("#datepicker").data("kendoDatePicker");
    });
</script>

See Also

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