[Vue.js]Vuetifyで日付ピッカー(Date picker)を実装する方法[v-date-picker]

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

コードをご紹介

<template>
  <v-row justify="center">
    <v-date-picker v-model="mydate"></v-date-picker>
  </v-row>
</template>

↑v-date-picker コンポーネントの使用例です。他のコンポーネントに比べても、とてもシンプルです。

v-modelで指定しているデータは、以下のようになります。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        mydate: new Date().toISOString().substr(0, 10),
      }
    })
</script>

Vue.jsを単一コンポーネント(.vue拡張子)として使用している場合は、data部分を次のように書くこともできます。

<script>
  export default {
    data () {
      return {
        mydate: new Date().toISOString().substr(0, 10),
      }
    },
  }
</script>

解説など

この v-date-picker は、あらかじめ組み込まれている機能が強力なので、
特に解説というほどの事はあまりないのですが
あえて書くとすれば、
コンポーネントに v-model として紐づける data を、Date形式で用意しておくことくらいです。

上記の例で data 内に mydate として定義している部分の意味としては、
まず
new Date() でDate形式のオブジェクトを生成、
続く
toISOString() でISO8601形式（日付、時刻に関する国際的な規格）の文字列を取得、
末尾の
substr() で、取得してきたISO8601形式の文字列を、左端から10文字取得する、
という内容が書かれています。

toISOString() を使用すると、
2021-04-19T14:18:00.000Z
↑こんなフォーマットの日付、時刻を表す文字列が帰ってくるので、
それを substr() で左から10文字分取得しているという事です。

これを v-date-picker に v-model として紐づけてあげるだけで、
内部的に、Vuetifyが日付ピッカーを生成してくれる、という仕組みです。

用意されているオプション(props)をいくつか試してみる

(1). マテリアルデザインの概念に沿ったelevation（階層の概念）を持たせてみる

elevation オプション(と言うより、正しくはprops) を加えると、すこし浮き上がった状態の日付ピッカーを表現することができます。
elevation は、24段階で指定が可能です。

<template>
  <v-row justify="center">
    <v-date-picker v-model="mydate" elevation="8"></v-date-picker>
  </v-row>
</template>

ちなみに elevation というのは、これのことですね。
Elevation — Material Design

(2). マテリアルデザインの概念に沿ってカラーを変えてみる

マテリアルデザインの豊富なカラーパレットから、自由に色を選択することができます。
変更できるのは、日付ピッカーのヘッダ色と、アクティブな日付の色です。
※もちろん、やろうと思えば、styleを記述して強制的に見た目の変更も可能と思われます

<template>
  <v-row justify="center">
    <v-date-picker 
      v-model="mydate"
      color="lime accent-4"
      header-color="lime lighten-1">
    </v-date-picker>
  </v-row>
</template>

(3). 表示言語をローカライズ（いわゆる国際化）する

Vuetifyの v-date-picker は、デフォルトで47の言語に対応しています。
これを使用するには、
locale=”ja-jp” のように
locale という props を指定、
さらに
:first-day-of-week=”0″
のように、その地域で用いられている曜日の始まりを v-bind で指定してあげます。
※なお、 : は v-bind の省略記法です。

例えば、日曜日始まりの場合は 0、月曜日始まりの場合は 1、といった具合に指定します。