【Vue.js】V-Calendarを使用してVue3で日付・時刻選択のコンポーネントを表示

概要

Vue3対応をしているカレンダーのライブラリがないかと探していたら、2022年1月時点ではアルファ版ですがV-Calendarというライブラリを見つけたので試してみました。V-Calendarについては、Vue.jsのカレンダーライブラリ「V-Calendar」の使い方の記事にある通り、色々な機能が実装されているカレンダーコンポーネントで、けっこう便利なイメージがあります。
今回はV-Calendarを使用して、Vue3で日付・時刻選択ができるコンポーネントを表示してみました。

実装方法

こちらのドキュメントにある「Date & Time」の項に、日付・時刻選択の実装例があります。具体的にはv-date-pickerのタグを使用し、modeをdateTimeで設定します。

実装サンプル

ドキュメントの内容のほぼそのままですが、Vue3で実装サンプルは以下の通りです。

<template>
  <v-date-picker v-model="state.sampleDateTime" mode="dateTime" />
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      sampleDateTime: undefined,
    });
    return {
      state,
    };
  },
});
</script>

以下のように表示されます。