【Vuetify】datepickerで入力できる日付、期間を指定する

f:id:yfp5521:20180730160701j:plain

 

最近の開発ではUIフレームワークにVuetifyを使用しています。その中でdatepickerを使っているのですが、特定の期間・日付のみ入力できるようにする方法に迷ったので、解決策を書きます。

 

Vuetifyとは

Vue.js用のUIフレームワークです。マテリアルデザインを元に作られており、googleのようなサイトが簡単にできます。

ドキュメントが非常に読みやすく、コンポーネントも充実しているのでおすすめです。

 

vuetifyjs.com

 

またVue関係の多くはそうですが、更新頻度が高いです。すぐにバージョンアップが行われるのでtwitterでリリース情報を見ておくのも良いです。

私もbootstrapにあるあのパーツがあればなあ・・と思っていたら、いつの間にか追加されていました。

 

twitter.com

 

 

やり方

 本題に戻ります。今回はvuetifyのdatepickerを使いました。日付をカレンダー入力できるコンポーネントです。

 

     f:id:yfp5521:20180730163652p:plain

 

このコンポーネントでは以下のように特定の期間しかクリックできないように指定ができます。

 <v-date-picker  
   locale="ja"
   min="2017-01-01"
   max="2018-01-01"
   v-model="testDate">
</v-date-picker>

 

minとmaxのプロパティをつけてクリックできる日を決められます。この場合、2017年1月1日~2018年1月1日の期間しかクリックできません。

 

上記のように日付が固定の場合は簡単なのですが、そうじゃない場合もあります。例えば「今日~100日後の期間のみクリックできるようにしたい。」といったものです。

こうした場合は動的に値を切り替える必要があるのですが、min,maxの中にdataの変数を入れても読んでくれませんでした。

そこで「allowed-dates」を使います。

 <v-date-picker  
   locale="ja"
   :allowed-dates="allowedDate"
   v-model="testDate">
</v-date-picker>

プロパティで:allowed-datesを定義し、allowedDateというメソッドを呼び出します。

 

  methods: {
    allowedDate: function (val) {
      // 今日~100日後までを選べるようにする
      let today = new Date() 
      today = new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate()
      )
      let maxAllowedDay = new Date()
      maxAllowedDay.setDate(
        today.getDate() + 100
      )
      maxAllowedDay = new Date(
        maxAllowedDay.getFullYear(),
        maxAllowedDay.getMonth(),
        maxAllowedDay.getDate()
      )
      return today <= new Date(val))
        && new Date(val) <= maxAllowedDay
     }
  }

 

allowedDateというメソッドで、今日~100日後に当てはまる日付のみを返します。

またgetFullYear, getMonth, getDateで代入しているのは時間を0時に初期化するためです。

これでdate-pickerで指定した期間のみクリックできるようになります。もちろんmethods内の処理は自由なので、「毎月15日はクリック不可」などの処理もできます。

 

最後に

vuetifyを使っているとプロパティの使用方法に困ることが時々あります。ドキュメントにすべての例が載っていれば使いやすいのですが、そんなときはgithubの質問を見たほうが早いです。「こんな機能ないの?」「いやこのプロパティ使えばできるよ」みたいな回答がよく載っています。

 

ドキュメント内検索よりも「vuetify picker ○○」のようにgoogle検索したほうが、githubの情報も上がってくるのでおすすめです。