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.

@(Html.Kendo().DatePicker() .Name("startDate").Value(DateTime.Today)) — Chakra, Jan 27 '15 at 08:07

score 42 · Accepted Answer · answered Aug 16 '14 at 06:45

42

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);
});

answered Aug 16 '14 at 06:45

Dhwani

7,484
17
78
139

3

Very clear and concise answer. $("#StartDate").data("kendoDatePicker").value(todayDate); worked for me except I had to use `.val(todayDate)` instead of `.value(todayDate)` – T3.0 Nov 06 '15 at 14:25
In countries that use dd/MM/yyyy format, use `var todayDate = kendo.toString(kendo.parseDate(new Date()), 'dd/MM/yyyy');` – Graham Laight Apr 11 '17 at 09:13
after an afternoon of problems with the format of dates, that's the solution! thank you! – Nuno Ribeiro Sep 21 '17 at 17:41
When I do this, it starts an infinite loop. – tdbeckett Jul 05 '18 at 13:34
2

Another option is to use the native way: var today = kendo.date.today(); – Alex Nov 19 '18 at 12:24

score 11 · Answer 2 · answered Aug 16 '14 at 06:26

11

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

answered Aug 16 '14 at 06:26

GotaloveCode

994
1
13
30

1

what's the difference? – Iman Mohamadi Mar 31 '15 at 06:06
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". – nullable Oct 27 '18 at 22:19

score 5 · Answer 3 · answered May 10 '16 at 07:29

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

score 3 · Answer 4 · answered Jan 15 '16 at 05:13

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.

score 3 · Answer 5 · answered Jan 13 '17 at 19:53

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

score -2 · Answer 6 · answered Aug 16 '14 at 07:20

-2

Please See this Example May Be helpful to you

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

answered Aug 16 '14 at 07:20

Rishi Shrivastava

201
1
12

1

link you should give in comment otherwise few people can downvote you. – Suchit kumar Aug 16 '14 at 07:22
1

for comment minimum 50 reputation needed . and i have 23 that's why i Give the answer . Is That Helpful ? – Rishi Shrivastava Aug 16 '14 at 07:47
1

that i know but other won't consider this. – Suchit kumar Aug 16 '14 at 08:09

Set Today date to kendo datepicker

6 Answers6

Linked