vuejs-datepicker の 選択制御に変数を使用したい

Question

標題の通り、以下サンプルコードを記載します

<template>
  <div id="app">
    <Datepicker :value="this.default"
    :format="DatePickerFormat" :language="ja"
    :disabled-dates="disabledDates"
    :highlighted="highlighted"></Datepicker>
  </div>
</template>

<script>
import Datepicker from 'vuejs-datepicker';
import { ja } from 'vuejs-datepicker/dist/locale';

export default {
  name: 'sample',
  components: {
    Datepicker,
  },
  data() {
    return {
      default: 'yyy/mm/dd',
      DatePickerFormat: 'yyyy年MM月dd日',
      input: '',
      todos: [{}],
      ja,
      disabledDates: {
        to: new Date(5日後〜),
      },
      highlighted: {
        days: [6, 0], // 曜日を設定
      },
    };
  },
  computed: {
    getYear() {
      const year = new Date();
      return year.getFullYear();
    },
  },
};
</script>

課題

① disabledDates: {
to: new Date(5日後以降選択可能にしたい),
},
のnew Date()の引数に変数を入れることができない
②休日は5日に含まないようにしたい（平日のみ）

試してみたこと

  disabledDates: {
    to: new Date(this.getYear),
  },

試しに、上記のようにしてみましたが、ダメでした。

何卒よろしくお願い致します。

Answer 1

Vue コンポーネントの data はその名の通りデータそのものを定義する項目で、ここでは computed 項目などのように this が vue インスタンスを参照していません。

他の computed プロパティを参照して値を作りたい場合は、以下のように computed に記載してください。

export default {
  data() {
    return {

    }
  },
  computed: {
    getYear() {
      const year = new Date();
      return year.getFullYear();
    },
    disabledDates() {
      return {
        to: new Date(this.getYear)
      }
    }
  }
}

また、別の方の回答にある通り、年を指定して Date インスタンスを作成する場合は new Date() の引数に月、日も指定してください。数値一つのみを与えた場合、それは1970年01月01日 00:00:00 UTC からの経過ミリ秒数と判断されて遥か昔の日付を表す Date オブジェクトが作成されてしまいます。

５日後の計算については、ループを回して平日か確認しながら日付を加算していけばいいと思います。
こちらについては現状質問が丸投げ状態になってしまっていますので、このあたり を参考に作成してみて、判らない部分がありましたら改めて質問されるとよいと思います。

Answer 2

https://www.npmjs.com/package/vuejs-datepicker

こちらのライブラリでしたら以下のようなコードがサンプルにありました。
注）月は0から始まります。

to: new Date(2016, 0, 5)

new Date() のコンストラクタに渡す引数のフォーマットは以下に記載があります。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);