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

4901 ワード
Vue.js Vuetify Vue.js テキストリンク

こんな感じで、日付と時刻の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).