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

How do I change or disable DatePicker animations for selecting months and years?

6 Answers 225 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Alan
Top achievements
Rank 1
Alan asked on 09 Jun 2015, 03:47 PM

I've disabled animation for opening and closing the date picker via animation:false. This unfortunately doesn't stop animations when selecting a month or year. How do I disable or change these animations?

6 Answers, 1 is accepted

Sort by
0
Alan
Top achievements
Rank 1
answered on 09 Jun 2015, 05:34 PM
I also need control over the animations used when navigating months using the previous and forward arrow links.
0
Georgi Krustev
Telerik team
answered on 11 Jun 2015, 08:52 AM
Hello Alan,

The animation option only controls the popup animation. Currently, the widget does not expose a way to apply a specific options to the underlying Calendar widget.

You can, however, disable them using an additional code - retrieve the calendar widget and disable the animation. Check the following demo that demonstrates this approach: If you want to control the vertical and horizontal effects then you will need to define animation.horizontal and animation.vertical options. Please note that you cannot disable only one direction (you will need to disable all animations at once). In general, the calendar navigation is not exposed, because it builds a special wrapper element to navigate correctly, which shrinks the list of the supported effects.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alan
Top achievements
Rank 1
answered on 11 Jun 2015, 02:40 PM
At the very least you should expose an option for animation timing. 300-500ms is way to slow in our case so these animations give our app a sluggish feeling. Thanks for the tip on disabling animations entirely. I guess we will have to use that less than desirable patch for now.
0
Georgi Krustev
Telerik team
answered on 15 Jun 2015, 09:12 AM
Hello Alan,

The animation option allows to define effect duration. Check the updated demo: You can see that every effect allows to define a duration option.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alan
Top achievements
Rank 1
answered on 15 Jun 2015, 02:41 PM

I tried changing the values in your demo to this:

animation: {
  horizontal: {
    effects: "fadeIn",
    duration: 75
  },
  vertical: {
    effects: "fadeIn",
    duration: 75
  }
}

It had no effect on the open/close animation and caused both the animation and functionality for changing months and years to stop working.

0
Georgi Krustev
Telerik team
answered on 17 Jun 2015, 09:17 AM
Hello Alan,

As I mentioned, the default animations of the Calendar are pretty complex, as they require additional HTML setup before applying the specified effects. That being said, I would suggest you either use the default animations and reduce the duration of the effects execution or just stop the animation at all.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Date/Time Pickers
Asked by
Alan
Top achievements
Rank 1
Answers by
Alan
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or