Kendo UI Docs

Complete Kendo UI Documentation
Get Kendo UI

Getting Started

Get Kendo UI

DatePicker

Edit this doc

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

Getting Started

Here is how to configure a simple Kendo DatePicker:

  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 datepicker:

    • WebForms

      <%: 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)) //Set min date of the datepicker
    .Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
    .Value(DateTime.Today) //Set the value of the datepicker
%>

    • Razor

      @(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)) //Set min date of the datepicker
    .Max(new DateTime(2099, 12, 31)) //Set min date of the datepicker
    .Value(DateTime.Today) //Set the value of the datepicker
)

Accessing an Existing DatePicker

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

Accessing an existing DatePicker instance

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

Handling Kendo UI DatePicker events

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

WebForms - subscribe by 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>

Razor - subscribe by 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>

Razor - subscribe by 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>)
  )
)

Troubleshooting

Display DateTimeOffset value in widget

The DatePicker widget supports only DateTime structure. You will need to convert DateTimeOffset into DatePicker in order to show date and 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 6/19/2013 10:59:38 AM UTC.

Back to Top