시간 선택기 (Time Picker)

출처: 문서

본문

el-time-select로 시간을 빠르게 선택하거나, 더 고급스러운 시간 선택 옵션이 필요하다면 el-time-picker를 사용해요.

el-time-picker로 자유로운 시간을 선택해요.

일반적인 선택 패널이 있는 시간 선택기예요.

시간 범위를 선택할 수 있는 시간 선택기예요.

고정된 시간 슬롯으로 시간을 선택해요.

Attribute	Description	Type	Default
value / v-model	바인딩 값	string	—
disabled	비활성화 여부	boolean	false
editable	텍스트 상자 입력 가능 여부	boolean	true
clearable	지우기 버튼 표시 여부	boolean	true
size	입력 상자 크기	string / number	—
placeholder	범위 선택이 아닐 때의 플레이스홀더	string	—
start-placeholder	범위 선택의 시작 시간 플레이스홀더	string	—
end-placeholder	범위 선택의 종료 시간 플레이스홀더	string	—
is-range	범위 선택 여부	boolean	false
min-time	선택할 수 있는 최소 시간	string	—
max-time	선택할 수 있는 최대 시간	string	—
format	시간 포맷	string	HH:mm:ss
name	네이티브 속성 name	string	—
disabled-hours	시간(시) 부분 비활성화	function	—
disabled-minutes	분 부분 비활성화	function	—
disabled-seconds	초 부분 비활성화	function	—
model-value / v-model	바인딩 값, 기본적으로 string 타입	string	—

Attribute	Description	Type	Default
value / v-model	바인딩 값	string	—
disabled	비활성화 여부	boolean	false
editable	텍스트 상자 입력 가능 여부	boolean	true
clearable	지우기 버튼 표시 여부	boolean	true
size	입력 상자 크기	string / number	—
placeholder	범위 선택이 아닐 때의 플레이스홀더	string	—
start-placeholder	범위 선택의 시작 날짜 플레이스홀더	string	—
end-placeholder	범위 선택의 종료 날짜 플레이스홀더	string	—
is-range	범위 선택 여부	boolean	false
min-time	선택할 수 있는 최소 시간	string	—
max-time	선택할 수 있는 최대 시간	string	—
format	시간 포맷	string	HH:mm:ss
name	네이티브 속성 name	string	—
range-separator	범위 선택 구분자	string	—
disabled-hours	시간(시) 부분 비활성화	function	—
disabled-minutes	분 부분 비활성화	function	—
disabled-seconds	초 부분 비활성화	function	—
clear-icon	지우기 아이콘 컴포넌트	string / Component	—
popper-class	팝오버의 커스텀 클래스 이름	string	—
arrow-control	화살표 버튼으로 시간을 제어할지 여부	boolean	false
popper-options 2.3.0	popper.js의 options와 동일해요	object	{}
empty-values 2.10.0	바인딩 값이 빈 값일 때 이 기본값을 사용해요. 주로 el-select-v2 시나리오를 대상으로 해요	array	[...]
value-on-clear 2.10.0	시간 선택기 값을 지운 후 이 속성으로 설정된 빈 값을 나타내는 val로 설정돼요	string	—

Name	Description
default	커스텀 콘텐츠. 아래 예시는 입력 상자 안에 커스텀 아이콘을 표시하는 예시예요
range-separator	범위 선택 구분자 커스텀