[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経由での導入方法 をご紹介しています。あわせてご覧ください。

それでは次のページより、コードのご紹介および、簡単な解説を行なっていきたいと思います。ぜひご覧ください。

この記事:[Vue.js]Vuetifyで日付ピッカー(Date picker)を実装する方法[v-date-picker] を書いた人

tedate.jp を運営しています。都内在住。 Webデザイナー/グラフィックデザイナーになって、通算15年程になります。 皆さまがWeb制作をもっと楽しめるような、良い情報を発信できるように。日々記事を書いています。 Webデザイナーとしての修行時代(受託のWebデザイナー時代)のエピソードを含む、私の「人となり」がある程度わかる記事はこちらにございます。