当我单击 next/prev 按钮时，如何在 jquery ui 日期选择器中设置月份变化动画

Question

我想要一个像这里找到的那样的日期选择器：

我使用 jquery ui 日期选择器非常成功。我一次显示 2 个月，就像 link 中的一样，但我希望它在我单击 next/prev 月份按钮时用幻灯片制作动画。

我已经试过了，但它使整个日期选择器具有动画效果，即整个日期选择器滑出然后又滑回。

onChangeMonthYear: (year, month, inst): void => {
    $('.ui-datepicker')
                    .hide('slide', { direction: 'right' }, 300)
                    .show('slide', { direction: 'left' }, 300);
}

这里是 fiddle:

fiddle

感谢 AB Udhay 已解决。我删除了 onChangeMonthYear 函数并将其放入构造函数中（使用 TypeScript）：

        $(document).on('click', '.ui-datepicker-next', () => {
            $('.ui-datepicker-calendar')
                .hide('slide', { direction: 'left' }, 200)
                .show('slide', { direction: 'right' }, 200);
        });

        $(document).on('click', '.ui-datepicker-prev', () => {
            $('.ui-datepicker-calendar')
                .hide('slide', { direction: 'right' }, 200)
                .show('slide', { direction: 'left' }, 200);
        });

Answer 1

"onChangeMonthYear" 方法将在日期和月份更改后触发。所以你在点击按钮时做这样的事情。

Updated Fiddle

$(document).on('click', '.ui-datepicker-next', function () {
  $(".ui-datepicker-title>span").hide().show(300);
  $(".ui-datepicker-calendar").hide('slide', { direction: 'right' }, 300).show('slide', { direction: 'left' }, 300)
})

$(document).on('click', '.ui-datepicker-prev', function () {
  $(".ui-datepicker-title>span").hide().show(300);
  $(".ui-datepicker-calendar").hide('slide', { direction: 'left' }, 300).show('slide', { direction: 'right' }, 300)
})

当我单击 next/prev 按钮时，如何在 jquery ui 日期选择器中设置月份变化动画

How do I animate the month changes in a jquery ui date picker when i click next/prev buttons

jquery-ui

animation

jquery-ui-datepicker