Month Selection is not working

[Alex]

When clicking on the month up at the top of the popup, the list of available months shows up for a second and then the calendar panel slides back in, preventing new month selection. What can be done to address this behavior and let user pick the new month from the list?

[Petar]

Hi Alex,

Can you give me more details about the component you are talking about? Is it a Native component or a Wrapper one? 

I've checked the following component to which you could be referring but I can't reproduce the reported issue in any of the demos:

Native components:

• Calendar - https://www.telerik.com/kendo-vue-ui/components/dateinputs/calendar/ 
• DatePicker - https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/ 

Wrapper components:

• Calendar - https://www.telerik.com/kendo-vue-ui/components/dateinputs-wrapper/calendar/ 
• DatePicker - https://www.telerik.com/kendo-vue-ui/components/dateinputs-wrapper/datepicker/ 

Let me know which component you are working with and send me(if possible) a runnable example in which we can reproduce the issue.

Regards,
Petar
Progress Telerik

[Alex]

Thank you for getting back to me. I’m using Kendo DatePicker and DateRangePicker for Vue. Both controls are working fine otherwise, however, I’m unable to select a different month by clicking the month label at the top of the popup, in either of those controls. It shows available months selection panel for a split second, and then slides back to calendar view.
Here is the html markup for the DatePicker:

<kendo-datepicker id="start" class="date-selector" v-model="startDate" v-on:change="startChange" format="MM/dd/yyyy" :max="new Date()"></kendo-datepicker>

I tried to remove v-model and v-on:change directives and they had no effect on the issue, so I feel like it is not related to Vue app code. Similar behavior is exhibited by DateRangePicker control on the same page. Interestingly enough, I have same DatePicker control on other Vue pages and it works just fine. Apparently, it is an issue with the particular page I’m working on.
Please let me know if you have any clues on what may cause such a behavior on the particular page.

[Alex]

 

Here is the additional information I narrowed the issue down to. I have a refresh counter on the page that is decremented every second and causes the page to refresh every minute. It appears that if I comment out decrementing the counter the issue goes away.

self.refreshInterval = setInterval(function () {
    //self.refreshCounter--;
}, 1000);

Is there anything you can think of that may cause this behavior?

Thank you for your assistance!

[Petar]

Hi Alex,

Based only on the provided details, I cannot say why after commenting the code inside the setInterval function, the reported issue disappears. 

Can you send me a runnable example with the implementation that you have? Thus I can furhter investigate the issue. You can isolate the discussed behavior in a StackBlitz example or send me a runnable project.

Also, if you don't want to publicly share your code, you can open a support ticket and send me your code in it.

Looking forward to your reply.

Regards,
Petar
Progress Telerik