DatePicker set value incorrectly

11 posts, 1 answers
  1. Leo (Yi)
    Leo (Yi) avatar
    5 posts
    Member since:
    Jul 2012

    Posted 29 Jul 2013 Link to this post

    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!
  2. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 30 Jul 2013 Link to this post

    Hi,

    Please try this:
    function B() {
         var NewDate = kendo.toString(this.value(), 'MM/dd/yyyy');
         $("#Date").data('kendoDatePicker').value(NewDate);
     }
  3. Kendo UI is VS 2017 Ready
  4. Leo (Yi)
    Leo (Yi) avatar
    5 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2013 Link to this post

    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.
  5. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 30 Jul 2013 Link to this post

    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
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 30 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Leo (Yi)
    Leo (Yi) avatar
    5 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2013 Link to this post

    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!
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 30 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Leo (Yi)
    Leo (Yi) avatar
    5 posts
    Member since:
    Jul 2012

    Posted 30 Jul 2013 Link to this post

    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
  10. Answer
    Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 31 Jul 2013 Link to this post

    Hi Leo,

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

    Is that what you want?

    Regards,
    Holger
  11. Leo (Yi)
    Leo (Yi) avatar
    5 posts
    Member since:
    Jul 2012

    Posted 31 Jul 2013 Link to this post

    Yes, that is exactly what I want. Thank you so much, Holger!
  12. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 31 Jul 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready