This is a migrated thread and some comments may be shown as answers.

Internal value of datepicker not updating

5 Answers 1445 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Hans-Jürgen
Top achievements
Rank 1
Veteran
Hans-Jürgen asked on 19 Oct 2020, 01:26 PM

I have a datepicker as part of a form. But while I can change the shown text manually, via the calender or through javascript, the internal value of the element seems to stay the same and I'm not sure what I'm doing wrong here:

In the cshtml:

<input asp-for="ViewModel.Start" style="width: 8rem" class="order-field">

in the js:

const startDatepicker = $("#ViewModel_Start").kendoDatePicker({
      focus: () => {
          setItem(this.getAttribute('id'), this.value())
     },
     change: onChange,
});

 

When I inspect the element in my browser, "value" is still set to what it was initialised with from the binding despite showing an other date.So this.value() always returns the initial value, not the shown value.

When I save the form though, the value on screen is saved.

5 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 21 Oct 2020, 12:40 PM

Hi Hans,

Thank you for the provided code snippet.

In order to set the manually populated value to the model use the "change" event of the Kendo UI DatePicker. This approach will set the ViewModel value to the DataBase model. The following demo represents the behavior:

After submitting the new value, observe the result in the developer tools console, and inspect the desired element.

For changing the value of the DataBase model programmatically, try the sync method of the DatePicker dataSource.

Give a try to the approach above and let me know if the issue persists.

 

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hans-Jürgen
Top achievements
Rank 1
Veteran
answered on 22 Oct 2020, 08:59 AM

Hi Anton,

thank you for your answer. Part of my problem is solved, as I see now how to get and set the values I need.

My main problem seems to be a different one though. It seems the focus event doesn't fire reliably. This led to having wrong values in my object. When clicking on the datepicker, I want to save the id of the datepicker and its current value in an object (setItem(...) in the code snippet). Am I using the wrong event here?

0
Anton Mironov
Telerik team
answered on 26 Oct 2020, 08:41 AM

Hi Hans,

Thank you for the provided additional details.

In this case, I would recommend using the "open" event of the Kendo UI DatePicker. Use the "e.sender" parameter for getting the needed information from the datePicker. Here is an example:

open: onOpen

          function onOpen(e){
            console.log(e.sender);
          }

The complete implementation could be found in the following dojo example:

Let me know if I could assist you with anything else.

Best Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Hans-Jürgen
Top achievements
Rank 1
Veteran
answered on 27 Oct 2020, 01:08 PM

Hi,

Thank you, that did it for me. The only inconvenience ist, the event doesn't fire when you just click the datepicker's textbox.

I managed to circumvent this unsing the wraper focus event

https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/event-handling/detect-wrapper-focus-event

and then calling the datepicker's open() method.

Thank you again for your help :)

0
Accepted
Anton Mironov
Telerik team
answered on 27 Oct 2020, 01:16 PM

Hello Hans,

I am glad to hear that the issue you were facing is now resolved.

In this case, I will close this ticket thread with your agreement.

Let me know if I could assist you with anything else.

 

Greetings,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Date/Time Pickers
Asked by
Hans-Jürgen
Top achievements
Rank 1
Veteran
Answers by
Anton Mironov
Telerik team
Hans-Jürgen
Top achievements
Rank 1
Veteran
Share this question
or