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

Vue.js&Vuetifyの記事_v-date-pickerについて

Vuetifyで日付ピッカー(Date Picker)を表示する

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、10回目です。
今回は、次の動画のような、日付ピッカー(Date Picker)を表示してみたいと思います。



WebアプリやWebサイトを制作していて、ユーザーに日付を選んでもらったり、
または単純にカレンダーのような日付表示を行いたい場合。
そんなケースがあったとします。

大体の場合、工数上の兼ね合い等、さまざまな事情から
ゼロから日付ピッカーを自作するのではなく、
なんらかのライブラリを探して組み込むケースが多い
と思いますが、
もしUIフレームワークにVuetifyを導入している場合、
デフォルトで日付ピッカーを利用することができます。

今回は、上記のようなニーズに応えることができる、Vuetify の v-date-picker コンポーネントについてご紹介します。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

コードをご紹介

<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、といった具合に指定します。

実際に動作するサンプル

ここまでご紹介してきた v-date-picker の、実際に動作するサンプルを作成しました。
次のリンクより、確認いただけます。
Vuetifyのサンプル_日付ピッカーを表示してみる

公式ドキュメント、APIページについて

v-date-picker コンポーネントの Vuetify公式ページは以下です。

Date picker component — Vuetify

また、公式APIページはこちらになります。ここには他のコンポーネント同様、設定できる各種 props の一覧が詳細に記載されています。
v-date-picker API — Vuetify

この記事のまとめ

今回は、シンプルな記述ながら、
とても強力な日付ピッカーを使用することができる
Vuetify の v-date-picker について、ご紹介しました。

短いコードでとても綺麗な日付ピッカーが使用できるので、
これを実際にご自身で使ってみて、実際に表示させてみるだけでも、
日付ピッカーというUIパーツの
UIデザインの参考にもなることと思います。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。