날짜 시간을 picker로 입력할 수 있는 vue-datetime
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.
유형String
date
Picker 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-nameString
null
Name for hidden input with raw value. See #51.
value-zoneString
UTC
Time zone for the value.
zoneString
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 .
phrasesObject
{ok: 'Ok', cancel: 'Cancel'}
Phrases.
use12-hourBoolean
false
Display 12 hour (AM/PM) mode
hour-stepNumber
1
Hour step.
minute-stepNumber
1
Minute step.
min-datetime
ISO 8601 String
null
Minimum datetime.
max-datetime
ISO 8601 String
null
Maximum datetime.
autoBoolean
false
Auto continue/close on select.
week-startNumber
auto from locale if weekstart is available or 1
First day of the week. 1 is Monday and 7 is Sunday.
플로우Array
Depends of type
Customize steps flow, steps available: time, date, month, year. Example: ['year', 'date', 'time']
titleString
''
Popup title.
hide-backdropBoolean
false
Show/Hide backdrop.
backdrop-clickBoolean
true
Enable/Disable backdrop click to cancel (outside click).
Reference
이 문제에 관하여(날짜 시간을 picker로 입력할 수 있는 vue-datetime), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/00__/items/0392c7e82cce70840cda
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
import { Datetime } from 'vue-datetime'
import 'vue-datetime/dist/vue-datetime.css'
components: {
datetime: Datetime
},
<datetime v-model="○○" type="datetime"></datetime>
<datetime v-model="○○" type="datetime" input-id="startDate">
<label slot="before" for="startDate">ラベル名</label>
</datetime>
Reference
이 문제에 관하여(날짜 시간을 picker로 입력할 수 있는 vue-datetime), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/00__/items/0392c7e82cce70840cda텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)