jQuery + moment.jsでカレンダーと連動する前日翌日ボタンをつくる

前提

使用するのは
jQuery
moment.js
flatpickr(カレンダーライブラリ)

動作

See the Pen jQuery + moment.jsでカレンダーと連動する前日翌日ボタン by natusme (@natsume0718) on CodePen.

解説

流れとしては、
１．画面表示されたらDateオブジェクトを作成しmomentでフォーマット、日付表示領域のtextを置き換える

２．前日、翌日ボタンが押されたら、初回時に作成したDateに±1した値をmoment.jsでフォーマットし日付表示領域のtextを置き換える

３．カレンダーで日付が選択されたら、初回時に作成したDateに選択された日付を入れ、moment.jsでフォーマットし日付表示領域のtextを置き換える

1．画面表示されたらDateオブジェクトを作成しmomentでフォーマット、日付表示領域のtextを置き換える

HTML

<button class="js-previous-date">前日</button>
<span class="js-display-date"></span>
<button class="js-next-date">翌日</button>
<button class="js-calendar">Calendar</button>

js-display-dateをロード後に書き換えています。
moment(displayDate).format("YYYY/MM/DD")で2019/10/23のような形式に整形しています。

JS

$(() => {
  
  let displayDate = new Date();
  $(".js-display-date").text(moment(displayDate).format("YYYY/MM/DD"));

２．前日、翌日ボタンが押されたら、初回時に作成したDateに±1した値をmoment.jsでフォーマットし日付表示領域のtextを置き換える

displayDate.setDate(displayDate.getDate() + 1);はdisplayDate.getDate() + 1で現在の日付(整数)に+1したものが得られるので、それを日付としてセットしています。
フォーマット部分は初回と同じです。
メソッド化してやってもいいと思います。

JS

 $(".js-previous-date").on("click", () => {
    displayDate.setDate(displayDate.getDate() + 1);
    $(".js-display-date").text(moment(displayDate).format("YYYY/MM/DD"));
  });

  $(".js-next-date").on("click", function() {
    displayDate.setDate(displayDate.getDate() + 1);
    $(".js-display-date").text(moment(displayDate).format("YYYY/MM/DD"));
  });

３．カレンダーで日付が選択されたら、初回時に作成したDateに選択された日付を入れ、moment.jsでフォーマットし日付表示領域のtextを置き換える

flatpckrのイベントであるonValueUpdateという日付が変更された際に呼び出されるものを用います。
その際に変更した日付を取得できるのでそれをフォーマットしています。
displayDateに代入しないと、前日翌日ボタンを押した際に、カレンダーで選択した日付が考慮されなくなるので入れています。
また、引数にわたってくる日付がDateオブジェクトではないので、渡ってくるYY-MM-DDからDateオブジェクトを作成しています

JS

flatpickr(".js-calendar", {
    onValueUpdate(selectedDates, dateStr) {
      displayDate = new Date(dateStr);
      $(".js-display-date").text(moment(displayDate).format("YYYY/MM/DD"));
    }
  });

あとがき

Vueで一度やったものをjQueryに変えてみましたが、この程度ならjQueryでもいいのかなとは思いました。
間違えやよりよい方法がありましたら、教えていただけますと幸いです