Zenn
🐥

Nuxt3で日付を選択するdatepicker実装

2024/05/06に公開
Nuxt 3
#
datepicker
tech

@vuepic/vue-datepickerを使用したdatepickerの実装方法になります
カレンダーの曜日等は日本語での実装になります
選択した日付の後に選択した時間が入ってしまうので、表示やAPIの送信などではformatなどで時間を切り取る必要があります

完成イメージ

カレンダー

選択後

パッケージのドキュメント

https://vue3datepicker.com/installation/

パッケージのインストール

npm install @vuepic/vue-datepicker

実装

<template>
  <VueDatePicker
    v-model="date" //①
    :format-locale="ja"　//②
    format="yyyy-MM-dd"　//③
    :enable-time-picker="false" //④
    auto-apply　//⑤
  />
  <p>{{ date }}</p> //⑥
</template>

<script>
import { ref } from 'vue';
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
import { ja } from 'date-fns/locale';

export default {
  components: { VueDatePicker },
  setup() {
    const date = ref();

    return {
      date,
      ja
    }
  }
};
</script>

コードの解説

①で選択した日付を格納するリアクティブ型の変数を指定します

②は曜日や月の表記を日本語に変更します（変更しなければ下記のようになります）

③で選択した日付を入力欄に表示するフォーマットを指定します
　ここで選択したフォーマットはリアクティブ型に格納されるフォーマットには適用されません
指定しなければこのようになります

④ではタイムピッカーを無効にしています
　日付を選択したい場合はこちらは設定不要です
ない場合は下記のように下に時計のアイコンが表示され、そこをクリックすると時間が指定できるようになっています

⑤を設定すると日付を選択した時点で入力が確定されます
　こちらを設定しない場合はカレンダーの下にCancelとSelectのボタンが表示されます

⑥dateという変数にdatepickerで選択したデータが入っているのでそれを表示します

他のオプションの紹介

min-date

選択可能な最初の日付を指定できます

:min-date="new Date('2024-05-04')"

max-date

選択可能な最後の日付を指定できます

:max-date="new Date('2024-05-22')"

cancelText

キャンセルボタンの表示を指定できます

cancelText="キャンセル"

selectText

選択ボタンの表示を指定できます

selectText="確定"

Discussion