Zenn
🗓️

Vue3.5で Vue Datepicker を使用して日付選択を実装する

2025/04/01に公開
Vue.js
Vuetify
datefns
DatePicker
tech

はじめに

お仕事でプラグイン「Vue Datepicker」を使用して日付選択を実装したのと、
Vueのv3.5で開発してみたかったので、備忘録として残します。

以下のコンポーネントを作成したので参考にしてください。

  • 日付選択
  • 日付時刻選択
  • 時刻選択
  • 日付範囲選択

動作環境・使用するツールや言語

  • Vue: v3.5.13
  • Vuetify: v3.7.16
  • Vue Datepicker: v11.0.2

作成したリポジトリ

導入

公式ドキュメントに沿って進めます。

npm install @vuepic/vue-datepicker

グローバル設定

グローバルに設定したい場合は、こちらをmain.tsに追記してください。

main.ts
import { createApp } from "vue";
import App from './App.vue';

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

const app = createApp(App);

+ app.component('VueDatePicker', VueDatePicker);

app.mount('#app');

ローカル設定

都度インポートして使用します。

sample.vue
<script setup>
import { ref } from 'vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'

const date = ref();
</script>

<template>
  <VueDatePicker v-model="date"></VueDatePicker>
</template>

オプション

今回使用したオプション一覧です。

  • format-locale
    • ローカライズ設定。
    • date-fnsはプラグインをインストール時に依存パッケージに含まれている。
  • format
    • 入力欄のフォーマット設定。
  • model-type
    • v-modelのフォーマット設定。
  • text-input
    • 入力欄でキーボード操作をできるようにする設定。
    • フォーマットも変更可能。
  • auto-apply
    • 日付を選択したら、自動で内部的にも選択が完了する設定。
  • enable-time-picker
    • 時刻選択の表示/非表示
  • teleport
    • 選択メニューを親要素ではなく、bodyに配置する設定。
  • time-picker-inline
    • 時刻選択をインライン要素とする設定。
  • select-text
    • 選択ボタンのテキスト設定。
  • cancel-text
    • キャンセルボタンのテキスト設定。
  • time-picker
    • 時刻選択モード
  • range
    • 範囲選択モード
  • multi-calendars

日付選択コンポーネント

AppDatePicker.vue
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
import { ja } from 'date-fns/locale'

const { format = 'yyyy/MM/dd', teleport = true } = defineProps<{
  format?: string
  teleport?: boolean
}>()

const date = defineModel<string>('date')
</script>

<template>
  <VueDatePicker
    v-model="date"
    :format-locale="ja"
    :format="format"
    :model-type="format"
    :text-input="{ format }"
    :auto-apply="true"
    :enable-time-picker="false"
    :teleport="teleport"
  >
  </VueDatePicker>
</template>

日付時刻選択コンポーネント

時刻部分はインラインにしました。

AppDateTimePicker.vue
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
import { ja } from 'date-fns/locale'

const { format = 'yyyy/MM/dd HH:mm', teleport = true } = defineProps<{
  format?: string
  teleport?: boolean
}>()

const date = defineModel<string>('date')
</script>

<template>
  <VueDatePicker
    v-model="date"
    :format-locale="ja"
    :format="format"
    :model-type="format"
    :text-input="{ format }"
    :teleport="teleport"
    time-picker-inline
    select-text="選択"
    cancel-text="取消"
  >
  </VueDatePicker>
</template>

時刻選択コンポーネント

AppTimePicker.vue
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
import { ja } from 'date-fns/locale'

const { format = 'HH:mm', teleport = true } = defineProps<{
  format?: string
  teleport?: boolean
}>()

const date = defineModel<string>('date')
</script>

<template>
  <VueDatePicker
    v-model="date"
    time-picker
    :format-locale="ja"
    :format="format"
    :model-type="format"
    :text-input="{ format }"
    :teleport="teleport"
    select-text="選択"
    cancel-text="取消"
  >
  </VueDatePicker>
</template>

日付範囲選択コンポーネント

AppDateRangePicker.vue
<script setup lang="ts">
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
import { ja } from 'date-fns/locale'

const { format = 'yyyy/MM/dd', teleport = true } = defineProps<{
  format?: string
  teleport?: boolean
}>()

const date = defineModel<string[]>('date')
</script>

<template>
  <VueDatePicker
    ref="datepicker"
    v-model="date"
    range
    multi-calendars
    :format-locale="ja"
    :format="format"
    :model-type="format"
    :text-input="{ format }"
    :teleport="teleport"
    :enable-time-picker="false"
    select-text="選択"
    cancel-text="取消"
  >
  </VueDatePicker>
</template>

コンポーネント使用例

VueDatePicker.vue
<script setup lang="ts">
import { ref } from 'vue'

import TheWrapper from '@/components/TheWrapper.vue'
import AppDatePicker from '@/components/controls/AppDatePicker.vue'
import AppDateTimePicker from '@/components/controls/AppDateTimePicker.vue'
import AppTimePicker from '@/components/controls/AppTimePicker.vue'
import AppDateRangePicker from '@/components/controls/AppDateRangePicker.vue'

const date = ref<string>('')
const datetime = ref<string>('')
const time = ref<string>('')
const dateRange = ref<string[]>([])
</script>

<template>
  <TheWrapper>
    <v-container fluid>
      <v-row>
        <v-col cols="12" lg="6" md="6" sm="6">
          <v-card title="日付選択">
            <v-card-item>
              <AppDatePicker v-model="date" />
            </v-card-item>
          </v-card>
        </v-col>
        <v-col cols="12" lg="6" md="6" sm="6">
          <v-card title="日付時刻選択">
            <v-card-item>
              <AppDateTimePicker v-model="datetime" />
            </v-card-item>
          </v-card>
        </v-col>
        <v-col cols="12" lg="6" md="6" sm="6">
          <v-card title="時刻選択">
            <v-card-item>
              <AppTimePicker v-model="time" />
            </v-card-item>
          </v-card>
        </v-col>
        <v-col cols="12" lg="6" md="6" sm="6">
          <v-card title="日付範囲選択">
            <v-card-item>
              <AppDateRangePicker v-model="dateRange" />
            </v-card-item>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </TheWrapper>
</template>

おわりに

複数カレンダーの独立表示については、今回の実装で初めて気づきました。
公式ドキュメントをよく見るって大事ですね。
ここまで読んでいただき、ありがとうございました。

Discussion

ログインするとコメントできます