Time picker
사용자가 특정 시간 및 시간의 범위를 지정 및 선택할 수 있도록 도움을 주는 요소입니다.
Time picker는 Action area의 여부와 관계없이 324px로 높이가 고정 되어있습니다. 최소 136, 최대 256 너비를 가지고 있으며 Picker 호출 시 호출 요소와의 간격을 유지를 위해 8px의 Safe area를 유지합니다.
시작-종료 시간과 같이 시간의 범위를 지정할 때에는 필드를 각각 하나씩 두고 입력합니다. 모든 Time picker의 기본 시간은 오전(am) 12:00로 통일 되어있으나 정책에 따라 기본 시간을 변경할 수 있습니다.
다양한 시간 포맷의 사용을 방지하고자 디자인에서는 포맷을 제한하고 있습니다.
- 개발 지원 포맷 = H, HH(24시간 형식), h, hh(12시간 형식) / m, mm(0-59) / s, ss(0-59) / A,a(오전오후 표시)
- 디자인 지원 포맷 = H,h / mm / ss / A
- 표현 방식 예시
- 포맷: h:mm:ss A
- 결과: 3:07:02 PM
- Locale: ko-KR을 기본 값으로 두고 있으며, Locale에 따라 시간 표현 방식과 Format에 영향을 미칩니다. 이 때 AM, PM/오전, 오후의 표기 위치를 고려하여 작업합니다.
- Timezone: 사용자의 환경에 따라 결정 됩니다.
- Web: Popover 형태로 사용하며 Bottomsheet, Modal 등으로 형태를 변경할 수 없습니다. 화면의 필드 위치에 따라 Picker가 뜨는 위치를 자동으로 계산하여 노출됩니다.
- iOS: Native Wheel 컴포넌트를 Time picker로 사용합니다. Bottom sheet, Popup 형태로 자유롭게 사용할 수 있습니다.
- Android: Native Time picker를 사용합니다. Dial, Input, Wheel 등 상황에 맞게 다양한 타입으로 사용할 수 있습니다.
사용자가 명확한 현재 시간을 입력해야할 때에는 ‘현재’ 시간을 바로 적용할 수 있도록 옵션을 제공합니다. 이 때 5배수로 분과 초의 간격이 설정 되어있다면 현재 시간 그대로 필드에 적용되며 Picker에서는 선택된 값을 노출하지 않습니다.
