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!
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!
3 Answers, 1 is accepted
0
Accepted

Holger
Top achievements
Rank 1
answered on 31 Jul 2013, 05:13 AM
Hi Leo,
Please check the following JS Bin: http://jsbin.com/iburat/1/
Is that what you want?
Regards,
Holger
Please check the following JS Bin: http://jsbin.com/iburat/1/
Is that what you want?
Regards,
Holger
Leo (Yi)
commented on 31 Jul 2013, 05:44 AM
Top achievements
Rank 1
Yes, that is exactly what I want. Thank you so much, Holger!
Kiril Nikolov
commented on 31 Jul 2013, 06:41 AM
Telerik team
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Holger
Top achievements
Rank 1
answered on 30 Jul 2013, 07:41 AM
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:
Regards,
Holger
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
0
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:
Which is not a valid syntax, as you need to first get an instance of the DatePicker using something like:
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Leo (Yi)
commented on 30 Jul 2013, 08:43 AM
Top achievements
Rank 1
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!
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
commented on 30 Jul 2013, 09:32 AM
Telerik team
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:
Kiril Nikolov
Telerik
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Leo (Yi)
commented on 31 Jul 2013, 02:30 AM
Top achievements
Rank 1
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
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
Please try this:
function
B() {
var
NewDate = kendo.toString(
this
.value(),
'MM/dd/yyyy'
);
$(
"#Date"
).data(
'kendoDatePicker'
).value(NewDate);
}
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.