타임 피커 (Time picker)

v-time-picker는 다른 Vuetify 컴포넌트들에 사용될 수 있는 독자적(stand-alone) 컴포넌트 입니다. 타임 피커는 시간을 선택할 수 있는 시각적 표현을 제공합니다.

사용법

타임피커는 기본적으로 라이트 테마를 사용합니다.


API

v-time-picker
이름
allowed-hours
디폴트
null
타입
function

선택할 수 있는 시간(hour)를 제한

이름
allowed-minutes
디폴트
null
타입
function

선택할 수 있는 분(minute)를 제한

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
format
디폴트
'ampm'
타입
string

사용가능한 옵션은 ampm24hr

이름
full-width
디폴트
false
타입
boolean

100% 너비(width)를 가지도록 강제

이름
header-color
디폴트
undefined
타입
string

헤더 색상을 정의. 지정되지 않은 경우 color prop이나 기본 피커 색상을 사용

이름
landscape
디폴트
false
타입
boolean

가로방향 피커

이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
max
디폴트
undefined
타입
string

선택할 수 있는 최대 시간

이름
min
디폴트
undefined
타입
string

선택할 수 있는 최소 시간

이름
no-title
디폴트
false
타입
boolean

피커의 타이틀을 숨김

이름
readonly
디폴트
false
타입
boolean
이름
scrollable
디폴트
false
타입
boolean

마우스 스크롤로 시간/분을 바꿀 수 있도록 설정

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

이름
width
디폴트
290
타입
number | string

The width of the content

예제

타임 피커 - 색상 (Time pickers - Colors)

타임 피커의 색상은 colorheader-color prop을 이용하여 설정할 수 있습니다. header-color가 제공되지 않으면 color prop이 사용됩니다.


타임 피커 - 다이얼로그와 메뉴 (Time pickers - In dialog and menu)

피커들의 유연성으로 인해, 원하는 방식을 정확히 그대로 구현할 수 있습니다.


타임 피커 - 24시간 형식 (24h format)

타임 피커는 24시간 형식으로 사용할 수 있습니다.


타임 피커 - 허락된 시간 (Allowed times)

선택 가능한 시간을 배열, 오브젝트, 함수를 이용하여 정의할 수 있습니다.


타임 피커 - 너비 지정(Setting picker width)

피커의 너비를 지정하거나 전체 너비로 만들 수도 있습니다.