私は、次/前のボタンに

Question

をクリックしたときにどのように私は私がここで見られるもののような日付ピッカーをご希望のjqueryのUIの日付ピッカーの月の変化をアニメーションでください：

datepicker example

私はjqueryのUIの日付ピッカーを使用しています成功しました。私は一度にリンクのような2ヶ月を表示していますが、次の/前の月のボタンをクリックするとスライドでアニメートしたいと思います。

私はこれを試しましたが、それはdatepicker全体をアニメーション化します。つまり、datepicker全体がスライドアウトしてから再び戻されます。 AB Udhayのおかげで解決しよう

fiddle

：ここ

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

はフィドルです。私は（活字体を使用して）onChangeMonthYear機能を削除し、コンストラクタでこれを置く：

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