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

間違えや、もっと良い方法があれば教えていただけますと幸いです

(久々に確認したところバージョンが変わってcodepenのカレンダーが非表示になってました...)

必要なもの

・vue.js
・V-Calendar(カレンダーライブラリ)
・moment.js

動作

※倍率を0.5にして確認して下さい

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

解説

流れとしては

１．カレンダーがDateじゃないとダメなのでdataはDateで作成
２．filterでmoment.js を用いて表示形式を変える
３．前日翌日ボタンにclickイベント設定し、dateに±1する

１．カレンダーがDateじゃないとダメなのでdataはDateで作成

HTML

<v-date-picker class="mx-2" v-model="date" :popover="{ placement: 'bottom', visibility: 'click' }">
    <button variant="outline-primary">カレンダー</button>
</v-date-picker>

JS

data: {
    date: new Date()
}

V-CalendarはDate型だと双方向バインディングできるのでDate型で作成

２．filterでmoment.js を用いて表示形式を変える

次に日付の表示部分

HTML

{{date | moment}}

JS

 filters: {
    moment: function(date) {
      return moment(date).format("YYYY-MM-DD");
    }
  }

YYYY-MM-DDの形式にフォーマットしているだけ

３．前日翌日ボタンにclickイベント設定し、dateに±1する

HTML

  <button v-on:click="subDay">前日</button> {{date | moment}}
  <button v-on:click="addDay">翌日</button>

JS

methods: {
    addDay: function() {
      const next = this.date.getDate() + 1;
      const tmp = new Date(this.date);
      tmp.setDate(next);
      this.$set(this, "date", tmp);
    },
    subDay: function() {
      const prev = this.date.getDate() - 1;
      const tmp = new Date(this.date);
      tmp.setDate(prev);
      this.$set(this, "date", tmp);
    }
  },

まず、翌日、前日を取得します。(数値が得られる)
現在のdateから一時用Date変数を作成
作成した一時用変数に翌日または、前日をセット
それをdataプロパティのdateにセット

の流れです

参考にさせていただいた記事

追記

年月日表記にしたい場合ローカライズの指定をします

JS

 filters: {
    moment: function(date) {
      moment.locale('ja');
      return moment(date).format("LL");
    }
  }