日付時刻をpickerで入力できるvue-datetime

こんな感じで、日付と時刻のpicker入力が実装できます。

Vuetify.jsにdate pickerとtime pickerはありましたが、2つを同時にできるものはなかったので探してみたところ、vue-datetime というものがありましたので、有難く使わせていただきます。

使用方法

vue-datetimeをインポート

import { Datetime } from 'vue-datetime'
import 'vue-datetime/dist/vue-datetime.css'

componentsに追加

components: {
     datetime: Datetime
},

datetimeタグにtypeで「datetime」を指定すると使用できる。
dateやtimeを指定すると片方だけの使用も可能です。

<datetime v-model="○○" type="datetime"></datetime>

ラベルのつけ方

<datetime v-model="○○" type="datetime" input-id="startDate">
   <label slot="before" for="startDate">ラベル名</label>
</datetime>

その他パラメータ

Parameter	Type	Default	Description
v-model (required)	ISO 8601 String	-	Datetime.
type	String	date	Picker type: date, datetime or time.
input-id	String	''	Id for the input.
input-class	String, Array or Object	''	Class for the input.
input-style	String, Array or Object	''	Style for the input.
hidden-name	String	null	Name for hidden input with raw value. See #51.
value-zone	String	UTC	Time zone for the value.
zone	String	local	Time zone for the picker.
format	Object or String	DateTime.DATE_MED, DateTime.DATETIME_MED or DateTime.TIME_24_SIMPLE	Input date format. Luxon presets or tokens.
phrases	Object	{ok: 'Ok', cancel: 'Cancel'}	Phrases.
use12-hour	Boolean	false	Display 12 hour (AM/PM) mode
hour-step	Number	1	Hour step.
minute-step	Number	1	Minute step.
min-datetime	ISO 8601 String	null	Minimum datetime.
max-datetime	ISO 8601 String	null	Maximum datetime.
auto	Boolean	false	Auto continue/close on select.
week-start	Number	auto from locale if weekstart is available or 1	First day of the week. 1 is Monday and 7 is Sunday.
flow	Array	Depends of type	Customize steps flow, steps available: time, date, month, year. Example: ['year', 'date', 'time']
title	String	''	Popup title.
hide-backdrop	Boolean	false	Show/Hide backdrop.
backdrop-click	Boolean	true	Enable/Disable backdrop click to cancel (outside click).