Posted at

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

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


必要なもの

・vue.js

・V-Calendar(カレンダーライブラリ)

・moment.js


動作


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


解説

流れとしては

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

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

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


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型で作成


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

次に日付の表示部分


HTML

{{date | moment}}



JS

 filters: {

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

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


3.前日翌日ボタンに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にセット

の流れです


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

https://ti-tomo-knowledge.hatenablog.com/entry/2018/07/09/163051

https://blog.photosynthesic.jp/2018/10/vue-js%E3%81%A8%E3%81%AA%E3%81%8B%E3%82%88%E3%81%8F%E3%81%AA%E3%82%8D%E3%81%86%EF%BC%9A%E6%97%A5%E6%9C%AC%E6%99%82%E9%96%93%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%ABfilter%E3%82%92%E4%BD%BF%E3%81%A3/