DatePicker Overview

Telerik UI for ASP.NET Core Ninja image

The DatePicker is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI DatePicker TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI DatePicker widget.

The DatePicker enables the user to select a date from a calendar or through a direct input. It provides options for using custom templates for its Month view, setting minimum and maximum dates, a start view, and a depth for navigation.

Basic Configuration

The following example demonstrates the basic configuration for the DatePicker.

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

        <kendo-datepicker name="monthpicker" start="CalendarView.Year" depth="CalendarView.Year"
            format="MMMM yyyy" value="DateTime.Now">
        </kendo-datepicker>

Functionality and Features

Events

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

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")
      )
    )
<kendo-datepicker name="datepicker"
                  on-open="datepicker_open"
                  on-close="datepicker_close"
                  on-change="datepicker_change"/>
    function datepicker_open() {
        // Handle the open event.
    }

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

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

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 Telerik UI DatePicker instance, use the [`jQuery.data()`](http://api.jquery.com/jQuery.data/) method. Once a reference is established, use the [DatePicker client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker#methods) to control its behavior.

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

            //Use the "value" API method to get the DatePicker's value.
            console.log(datepicker.value());
        });
        </script>

## See Also

* [Basic Usage of the DatePicker HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/datepicker/index)

* [Basic Usage of the DatePicker TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/datepicker/tag-helper)

* [Using the API of the DatePicker HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/datepicker/api)
* [Server-Side API](/api/datepicker)
In this article