vue.jsで時刻選択できるライブラリ使ってみた

はじめに

フォームを作成する際にvue.jsのライブラリを用いて時刻選択項目を追加しました。
2つのライブラリを使ってみましたので、備忘録として残します。

１つ目、「VueDatePicker」　
　　　　　　※時間間隔を設定できなかった（できた方教えてください）
２つ目、「VueCtkDateTimePicker」

どちらも細かいところをカスタマイズできるので楽しいです！

環境

開発環境	バージョン
Laravel	10.1.5
PHP	8.2.3
vue.js	3.2.47

「 VueDatePicker 」

公式ドキュメント

ライブラリをインストール

npm install @vuepic/vue-datepicker

実装

app.js

import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
app.component('VueDatePicker', VueDatePicker);

timeSetComponent.vue

<template>
    <VueDatePicker v-model="time" time-picker></VueDatePicker>
</template>

「 VueCtkDateTimePicker 」

公式ドキュメント

ライブラリをインストール

npm i --save vue-ctk-date-time-picker

実装

app.js

import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';
import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css';
app.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);

timeSetComponent.vue

<vue-ctk-date-time-picker label="時刻を選択" v-model="value" format="hh:mm a" formatted="hh:mm a" only-time minute-interval="15" input-size="sm"></vue-ctk-date-time-picker>

終わりに

最後まで閲覧ありがとうございました。
ご指摘、ご意見ありましたらご意見よろしお願いします。