CODEWITHSUNDEEP
jquery-uianimationjquery-ui-datepicker
SquarePeg
SquarePeg

Reputation: 1781

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

I would like a datepicker like the one found here:

datepicker example

I am using the jquery ui datepicker with much success. I am showing 2 months at a time just like the one in the link but I would like it to animate with a slide when I click the next/prev month buttons.

I have tried this but it animates the entire datepicker, i.e. the entire datepicker slides out then back in again.

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

here is a fiddle:

fiddle

SOLVED thanks to AB Udhay. I removed the onChangeMonthYear function and put this in the contructor(using 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);
        });

Upvotes: 0

Views: 869

Answers (1)

AB Udhay
AB Udhay

Reputation: 753

"onChangeMonthYear" method will trigger after the date and month has changed. So you do something like this on click of the buttons.

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

Upvotes: 1

Related Questions