DatePicker set value incorrectly

[Leo (Yi)]

Guys,

I want to set DatePicker a new value in a different function from where I define the DatePicker. Right now, I do like this:

function A() {
    $("#Date").kendoDatePicker({ min: new Date($('#TodaysDate').val())});
}

function B() {
    var NewDate = kendo.toString(this.value(), 'MM/dd/yyyy');
    $("#Date").val(NewDate);
}

It turns out that the date appears in the dialog is correct, but the date highlighted in the calendar is wrong. It's just like enter a new date in the dialog but doesn't press the Enter. Anyone has any idea how to fix it?

Thanks!

[Holger]

Hi,

Please try this:

function B() {
     var NewDate = kendo.toString(this.value(), 'MM/dd/yyyy');
     $("#Date").data('kendoDatePicker').value(NewDate);
 }

[Leo (Yi)]

Hi,

Thanks for your reply. But it doesn't work. There is a JavaScript runtime error: Unable to get property 'value' of undefined or null reference. The tricky part is that your solution does work in function A after the declaration of the kendo DatePicker, but it doesn't work in function B.

[Holger]

Hi Leo,

Please check the following JS Bin: http://jsbin.com/iburat/1/

Is that what you want?

Regards,
Holger

[Leo (Yi)]

Yes, that is exactly what I want. Thank you so much, Holger!

[Kiril Nikolov]

Hi Leo,

I can see now what was the desired functionality, but Holger was faster than me. 

I am really sorry that I was not able to understand your question the first time, but please try to be more specific in future, so it can be easier for us to help you from the first iteration. Wish you good luck with your project.
 
Regards,
Kiril Nikolov
Telerik

[Holger]

Hi,

you will have to create the DatePicker before you can use it. If the function A() is not called before function B() the DatePicker has not been created and you will run into an error.

You can modify function B() like this:

function B() {

    var NewDate = kendo.toString(this.value(), 'MM/dd/yyyy');

    var datePicker = $("#Date").data('kendoDatePicker');
    if (!datePicker) {

        $("#Date").kendoDatePicker({ min: new Date($('#TodaysDate').val())});
        datePicker = $("#Date").data('kendoDatePicker');
    }

    datePicker.value(NewDate);

 }

Regards,
Holger

[Kiril Nikolov]

Hi Leo,

In order to set a new date to the date picker you can use the .value() method, using an instance of the DatePicker. I can see that you are trying with:

$("#Date").val(NewDate);

Which is not a valid syntax, as you need to first get an instance of the DatePicker using something like:

var datePicker = $("#datePicker").data('kendoDatePicker');

and then use the .value() method to set the new value.

For your convenience here is a jsBin example which demonstrates a possible implementation.

Regards,
Kiril Nikolov
Telerik

[Leo (Yi)]

Hi Kiril,

I think you meant basically the same as Holger, and it does solve the highlight problem. But it causes a new problem: I need to click a date twice in order to choose and highlight a new date in the calendar. Could it be caused by declaring:

        $("#Date").kendoDatePicker({ min: new Date($('#TodaysDate').val())});

twice in two functions? But if I don't do this, there will be an error as I said to Holger previously. How could I fix it?

Thank you!

[Kiril Nikolov]

Hello Leo,

If I understand you correctly, you want the Kendo UI DatePicker to expand when you set the new value. By default when new value is set the DatePicker does not expand, but you can achieve this functionality pretty easy using the .open() method. So your code should be something like:

var dp = $("#datePicker").data('kendoDatePicker');
dp.value("07/30/2014");
dp.open()

If this is not what you are looking for, please accept my apologies and try to explain in more details what exactly do you want to achieve.

Regards,
Kiril Nikolov
Telerik

[Leo (Yi)]

Hi Kiril,

I think there is some misunderstanding. Actually, there are two Kendo UI DatePicker X and Y. What I want to do is when I choose a date in DatePicker X, I want to transfer that date to DatePicker Y. Meanwhile, if I choose a different date in DatePicker Y after receiving the date transfered from DatePicker X, I want DatePicker Y to show the new chosen date.

DatePicker Y is created in function A, and I wrote a function B to transfer the date chosen in DatePicker X to DatePicker Y. That's when I got my original question that the date appears in the dialog of DatePicker Y is correct but the date highlighted in the calendar of DatePicker Y is incorrect.

I tried to get an instance of the DatePicker Y in function B but it failed, so I took Holger's advice to create the DatePicker Y in function B first and then set it with a new value (as Holger's second reply). It does solve my previous problem. But it causes a new problem: If I want to choose a different date by clicking a date in the calendar of DatePicker Y, I need to click a date twice in order to highlight and choose that date. I wonder if this problem is caused by creating the DatePicker Y twice? Or if there are any other solutions to my original problem?  Thank you so much!

Best,
Leo