Vue3で簡単にDate Time Pickerを実装！「Vue Datepicker」の使い方

Vue Datepickerとは

Vue 3 に対応した日付選択コンポーネントです。
カレンダー形式で日付を選択でき、日本語を含む多言語に対応しています。
また、日付フォーマットや外観など多数のオプションがあり、キーボードナビゲーションや日付範囲指定などの機能もサポートしています。
簡単な実装方法と豊富な機能がある高品質な日付選択コンポーネントです。

【動画サイズ：342KB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm install @vuepic/vue-datepicker

yarn add @vuepic/vue-datepicker

<script src="https://unpkg.com/@vuepic/vue-datepicker@3.6.5/dist/vue-datepicker.iife.js"></script>

<link rel="stylesheet" href="https://unpkg.com/@vuepic/vue-datepicker@3.6.5/dist/main.css">

リポジトリを取得する場合は、以下のURLから取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。

step.1 ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

ES6等で実装する場合

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

UMDで実装する場合

なし

step.2 Vueインスタンスを設定

「VueDatePicker 」をVue コンポーネントでインポートします。

フォーマットを設定するために、「format」オプションにフォーマットを設定します。
フォーマットについての詳しい説明はこちらを確認してください。

const App = {
  data() {
    return {
      date: new Date(),
      format: 'yyyy-MM-dd HH:mm', 
    }
  },
  components: { datepicker: VueDatePicker },
}
Vue.createApp(App).mount('#app');

step.3 テンプレートを準備

Vue コンポーネントのテンプレート内で、<datepicker> タグを使用してコンポーネントをレンダリングします。
各種オプションについては、この記事の下部をご参照ください。

サンプルはケバブケースで記載しています。

<div id="app">
  <div id="box">
    <datepicker 
      v-model="date" 
      :format="format"
      :enable-time-picker="true"
      week-start="0"
      locale="ja" 
      placeholder="日付を選択"
      select-text="選択"
      cancel-text="ｷｬﾝｾﾙ"
      :show-now-button="true"
      now-button-label="現在を選択"
    ></datepicker>
  </div>
</div>

サンプル

今回のソースを実際に触って確認できるようにデモを用意しました。

日付のフォーマット

選択された日付を表示する形式を指定するために、formatオプションを使用します。

たとえば、"yyyy/MM/dd"というフォーマットを指定すると、選択された日付は"2023/03/08"のように表示されます。

以下は、フォーマットを"yyyy年MM月dd日 HH時mm分"に設定した場合の例です。

<datepicker :format="'yyyy年MM月dd日 HH時mm分'"></datepicker>

formatオプションを使用することで、日付の表示形式を自由にカスタマイズすることができます。

サンプル

フォーマット形式

以下は、date-fnsのフォーマット文字列とその意味を表にまとめたものです。

言語翻訳（日本語等）

カレンダーの言語や書式を変更するために「locale」オプションを使います。
locale には、date-fns の locale オブジェクトを渡す必要があります。
例えば、日本語にする場合は以下のようにします。

<datepicker locale="ja"></datepicker>

サンプル

サポート言語一覧

以下がdate-fnsのサポート言語一覧です。

このリストは、date-fns v2.0.0のものです。最新のリストは、date-fnsの公式ドキュメントを確認してください。

ハイライト表示

「highlight」 オプションは、特定の日付を強調表示するために使用されます。
例えば、特別な日付や休日を目立たせたい場合に使用できます。
また「highlight-week-days」オプションを使用すると、特定の曜日を強調表示することができます。

<datepicker :highlight="[new Date('2023-03-04'), new Date('2023-03-10')]"></datepicker> 

<datepicker :highlight-week-days="[0, 6]"></datepicker> 

選択可能日を設定する

「allowed-dates」オプションは、有効な日付を制限するために使用されます。

 
<datepicker :allowed-dates="[new Date('2023-03-04'), new Date('2023-03-22')]"></datepicker>

選択不可日を設定する

「disabled-dates」オプションは、選択不可能な日付を指定するために使用されます。
また「disabled-week-days」オプションを使用すると、無効にする曜日を指定することができます。

<datepicker :disabled-dates="[new Date('2023-03-09'), new Date('2023-03-10')]"></datepicker>

<datepicker :disabled-week-days="[6, 0]"></datepicker>

マーカーの表示

「markers 」オプションは、カレンダーにマーカーを表示するために使用されます。
マーカーは、特定の日付に関する情報を示すために使用されます。例えば、予定がある日にマーカーを表示する場合に使用できます。

マーカーはTooltipも使用することができます。
予定ある日の詳細な内容をTooltipで表示します。

<datepicker :markers="markers"　v-model="date" ></datepicker>

const App = {
  data() {
    return {
      date: new Date(),
      markers: [
        {
          date: new Date('2023-03-10'),
          type: 'dot',
          tooltip: [{ text: 'ドットのTooltip', color: 'green' }], 
        },
        {
          date: new Date('2023-03-09'),
          type: 'line',
          tooltip: [
            { text: '最初のTooltip', color: 'blue' },
            { text: '最後のtooltip', color: 'yellow' },
          ],
        }, 
        {
          date: new Date('2023-03-11'),  
          type: 'dot',
          color: 'blue',
          tooltip: [{ text: '青色のドットのTooltip', color: 'green' }],
         },
      ]
    }
  },
  components: { Datepicker: VueDatePicker },
}
Vue.createApp(App).mount('#app');

インライン表示

カレンダーをインラインで表示するには、「inline」オプションを設定します。

<datepicker inline></datepicker>

範囲指定で選択

範囲を指定して日付を選択するには、「range」オプションを設定します。
選択可能な範囲を指定するには「auto-range」オプションを使います。

<datepicker range auto-range="6"></datepicker>

複数日付を選択

一度に複数の日付を選択するには、「multi-dates」オプションを設定します。

<datepicker multi-dates></datepicker>

日付のみ使用

日付のみを使用するには、「enable-time-picker」オプションを false にする必要があります。

<datepicker :enable-time-picker="false"></datepicker>

時間のみ使用

時間のみ使用するには、「time-picker」オプションを設定します。

<datepicker time-picker></datepicker>

年のみ使用

年のみ使用するには、「year-picker」オプションを設定します。

<datepicker year-picker></datepicker>

月のみ使用

月のみ使用するには、「month-picker」オプションを設定します。

<datepicker month-picker></datepicker>

週のみ使用

週のみ使用するには、「week-picker」オプションを設定します。

<datepicker week-picker></datepicker>

曜日を日曜日始まりにする

カレンダーの曜日を日曜日始まりにするには、「week-start」オプションに「0」を設定します。

<datepicker week-start="0"></datepicker>

Methods

イベントと組み合わせて使用します。
例えば日付を選択してすぐにピッカーメニュー閉じて欲しい時などに使用します。

イベント

ユーザーの操作によって発生するイベントの一覧です。

まとめ

Vue 3系のDateTimePickerでした。

ある程度やりたいことは全て網羅されている感じなので、管理人は今後はこのライブラリを主軸に使っていくと思います。
あとはUIをちょっと調整しないなあ。

今日はこの辺で－