이런 식으로 날짜와 시간의 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
유형
Default
Description


v-model (required)
ISO 8601 String
-
Datetime.

유형StringdatePicker type: date, datetime or time.

input-idString''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-nameStringnullName for hidden input with raw value. See #51.

value-zoneStringUTCTime zone for the value.

zoneStringlocalTime zone for the picker.

format
Object or StringDateTime.DATE_MED , DateTime.DATETIME_MED or DateTime.TIME_24_SIMPLE
Input date format. Luxon presets or tokens .

phrasesObject{ok: 'Ok', cancel: 'Cancel'}Phrases.

use12-hourBooleanfalseDisplay 12 hour (AM/PM) mode

hour-stepNumber1Hour step.

minute-stepNumber1Minute step.

min-datetime
ISO 8601 StringnullMinimum datetime.

max-datetime
ISO 8601 StringnullMaximum datetime.

autoBooleanfalseAuto continue/close on select.

week-startNumberauto from locale if weekstart is available or 1
First day of the week. 1 is Monday and 7 is Sunday.

플로우ArrayDepends of type

Customize steps flow, steps available: time, date, month, year. Example: ['year', 'date', 'time']

titleString''Popup title.

hide-backdropBooleanfalseShow/Hide backdrop.

backdrop-clickBooleantrueEnable/Disable backdrop click to cancel (outside click).