Internal value of datepicker not updating

[Hans-Jürgen]

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.

[Anton Mironov]

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:

• https://dojo.telerik.com/EnEsEWay

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

[Hans-Jürgen]

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?

[Anton Mironov]

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:

• https://dojo.telerik.com/UVUzozaw

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

Best Regards,
Anton Mironov
Progress Telerik

[Hans-Jürgen]

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 :)

[Anton Mironov]

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