vue.js 日付指定ライブラリ vuejs-datepickerで選択可能日付を制限する

#本記事について
vuejs-datepicker のライブラリ取得方法等、基本的な情報については省略します。

今回はvuejs-datepickerで選択できる日付を制限する方法を記載します。

#vuejs-datepickerで選択可能日付を制限する

テンプレートに、:disabled-dates="disabledDates"を設定

<template>
...
  <datepicker :disabled-dates="disabledDates"></datepicker>
...
</template>

script内で、disabledDatesを指定する

<script>
  data() {
    return {
    　disabledDates: {
      　to: new Date(), 　　// 本日以前の日付は選択不可
    　　from: new Date(), 　　// 本日以降の日付が選択不可
    　　days: [6, 0], 　　// 曜日指定（この場合、土曜日・日曜日選択不可）
    　　daysOfMonth: [29, 30, 31], 　　// 各月の２９、３０、３１日が選択不可
    　　dates: [ 　　　　　　　　　　　// 選択不可の日付を複数指定
      　　new Date(2020, 8, 23),
      　　new Date(2020, 8, 24),
      　　new Date(2020, 8, 25)
    　　],　　　　　　　　　　　　　
    　　ranges: [{                  // 選択不可の期間を指定
      　　from: new Date(2020, 9, 1),
      　　to: new Date(2020, 9, 15)
    　　}],
      }
    }
  }
</script> 

参照：https://www.npmjs.com/package/vuejs-datepicker