Set Today date to kendo datepicker

Question

I want to set today date to Kendo DatePicker on clear button click. I tried following but it is not working.

$('#btnClear').click(function () {
  $("#StartDate").data("kendoDatePicker").value(new Date());
});

Above code don't give any error and don't set today date. It clears kendo DatePicker's textbox value. Note: Kendo DatePicker format is MM/dd/yyyy.

Rustyrut

@(Html.Kendo().DatePicker() .Name("startDate").Value(DateTime.Today)) – Autochthon

Answer 1

I tried following and works perfectly for me.

$('#btnClear').click(function () {
  var todayDate = kendo.toString(kendo.parseDate(new Date()), 'MM/dd/yyyy');
  $("#StartDate").data("kendoDatePicker").value(todayDate);
});

Rustyrut

Very clear and concise answer. $("#StartDate").data("kendoDatePicker").value(todayDate); worked for me except I had to use .val(todayDate) instead of .value(todayDate) – Sciential

In countries that use dd/MM/yyyy format, use var todayDate = kendo.toString(kendo.parseDate(new Date()), 'dd/MM/yyyy'); – Ammonia

after an afternoon of problems with the format of dates, that's the solution! thank you! – Lorinalorinda

When I do this, it starts an infinite loop. – Podiatry

Another option is to use the native way: var today = kendo.date.today(); – Gosser

Answer 2

 $('#btnClear').click(function (e) {
  var todayDate = new Date();
  $('#StartDate').data("kendoDatePicker").value(todayDate);
                                  });

Kruse

what's the difference? – Underexpose

If this doesn't work for you - make sure you're not setting max: new Date which will likely be before the Date you're trying to set as "now". – Hollyanne

Answer 3

After setting the value of the datepicker, you need to trigger the change event of the datePicker e.g:

$("#StartDate").data("kendoDatePicker").trigger("change");

Explanation from Telerik:

"The DatePicker will not apply the "new" date if it is the same as its internal value. When you call the date in the method [they mean by using datepicker.value(myDate)] and just set its date, then the internal date of the DatePicker is set too"

See also http://www.telerik.com/forums/datepicker-does-not-update-the-value-in-view

Stith

Answer 4

I have use it like -

 @(Html.Kendo().DatePicker()
                  .Name("customerOrderDate")
                  .Min(DateTime.Today)
                  .Value(Model.CustomerOrderDate)
                  .HtmlAttributes(new {style = "width:120px"}))

It is good part that Kendo have DateTime struct in their api.

Gracious

Answer 5

The answer didn't work for me it wasn't until I triggered a change event before it set.

var datePicker = $("#StartDate").data("kendoDatePicker");
var todayDate = new Date();                                   
datePicker.value(todayDate);
datePicker.trigger("change"); // <-- This one did the trick

Boehike

Answer 6

Please See this Example May Be helpful to you

http://rniemeyer.github.io/knockout-kendo/web/DatePicker.html

Cuneal

link you should give in comment otherwise few people can downvote you. – Respectable

for comment minimum 50 reputation needed . and i have 23 that's why i Give the answer . Is That Helpful ? – Cuneal

that i know but other won't consider this. – Respectable