🐥
Nuxt3で日付を選択するdatepicker実装
@vuepic/vue-datepickerを使用したdatepickerの実装方法になります
カレンダーの曜日等は日本語での実装になります
選択した日付の後に選択した時間が入ってしまうので、表示やAPIの送信などではformatなどで時間を切り取る必要があります
完成イメージ
カレンダー
選択後
パッケージのドキュメント
パッケージのインストール
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