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

7 posts, 0 answers
  1. Alan
    Alan avatar
    7 posts
    Member since:
    May 2014

    Posted 09 Jun 2015 Link to this post

    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?

  2. Alan
    Alan avatar
    7 posts
    Member since:
    May 2014

    Posted 09 Jun 2015 Link to this post

    I also need control over the animations used when navigating months using the previous and forward arrow links.
  3. Kendo UI is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 11 Jun 2015 Link to this post

    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!
     
  5. Alan
    Alan avatar
    7 posts
    Member since:
    May 2014

    Posted 11 Jun 2015 in reply to Georgi Krustev Link to this post

    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.
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 15 Jun 2015 Link to this post

    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!
     
  7. Alan
    Alan avatar
    7 posts
    Member since:
    May 2014

    Posted 15 Jun 2015 in reply to Georgi Krustev Link to this post

    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.

  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 17 Jun 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready