TimePicker
휠 스크롤 방식으로 시간을 선택하는 컴포넌트입니다. Root, Column, Highlight로 구성된 Compound Component 패턴으로 유연한 커스터마이징이 가능합니다. 12시간(AM/PM) 및 24시간 형식을 지원하며, minuteStep 옵션으로 분 단위 간격을 자유롭게 설정할 수 있습니다. 터치 및 휠 스크롤에 최적화된 자연스러운 스크롤 인터랙션을 제공하며, disabled 상태와 itemHeight를 통한 레이아웃 조정을 지원합니다.
미리보기
01
02
03
04
05
06
07
08
09
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
AM
PM
10:30 AM
사용법
TSX
1"use client";
2
3import { useState } from "react";
4import { TimePicker } from "motile-ui";
5import type { TimeValue } from "motile-ui/TimePicker";
6
7export default function PreviewExample() {
8 const [time, setTime] = useState<TimeValue>({
9 hour: 10,
10 minute: 30,
11 period: "AM",
12 });
13
14 return (
15 <div style={{ display: "flex", flexDirection: "column", gap: "16px", alignItems: "center" }}>
16 <TimePicker.Root value={time} onChange={setTime}>
17 <TimePicker.Column type="hour" />
18 <TimePicker.Column type="minute" />
19 <TimePicker.Column type="period" />
20 <TimePicker.Highlight />
21 </TimePicker.Root>
22 <div style={{ fontSize: "14px", color: "#666" }}>
23 {time.hour}:{time.minute.toString().padStart(2, "0")} {time.period}
24 </div>
25 </div>
26 );
27}API 레퍼런스
TimePicker.Root
시간 선택기 상태를 관리하는 최상위 컨텍스트 프로바이더
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
value | TimeValue | - | 현재 시간 값 (제어 모드) |
defaultValue | TimeValue | - | 초기 시간 값 (비제어 모드) |
onChange | (time: TimeValue) => void | - | 시간이 변경될 때 호출되는 콜백 |
format | "12" | "24" | "12" | 시간 형식: 12시간제 또는 24시간제 |
minuteStep | 1 | 5 | 10 | 15 | 30 | 5 | 분 단위 간격 (1, 5, 10, 15, 또는 30) |
disabled | boolean | false | 시간 선택기 비활성화 |
itemHeight | number | 40 | 각 아이템의 높이 (픽셀) |
fullWidth | boolean | false | TimePicker가 부모 요소의 전체 너비를 차지하도록 설정 |
기본 <code>div</code> HTML 속성을 모두 사용할 수 있습니다.
TimePicker.Column
시간, 분, AM/PM 선택을 위한 스크롤 가능한 컬럼
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
type | "hour" | "minute" | "period" | - | 컬럼 타입 (hour, minute, 또는 period) |
기본 <code>div</code> HTML 속성을 모두 사용할 수 있습니다.
TimePicker.Highlight
선택된 값을 표시하는 시각적 하이라이트 (선택사항)
기본 <code>div</code> HTML 속성을 모두 사용할 수 있습니다.
예제
24시간 형식
AM/PM 없이 24시간 형식을 사용합니다.
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
00
05
10
15
20
25
30
35
40
45
50
55
14:30
TSX
1"use client";
2
3import { useState } from "react";
4import { TimePicker } from "motile-ui";
5import type { TimeValue } from "motile-ui/TimePicker";
6
7export default function Format24HourExample() {
8 const [time, setTime] = useState<TimeValue>({
9 hour: 14,
10 minute: 30,
11 });
12
13 return (
14 <div style={{ display: "flex", flexDirection: "column", gap: "16px", alignItems: "center" }}>
15 <TimePicker.Root format="24" value={time} onChange={setTime}>
16 <TimePicker.Column type="hour" />
17 <TimePicker.Column type="minute" />
18 <TimePicker.Highlight />
19 </TimePicker.Root>
20 <div style={{ fontSize: "14px", color: "#666" }}>
21 {time.hour.toString().padStart(2, "0")}:{time.minute.toString().padStart(2, "0")}
22 </div>
23 </div>
24 );
25}분 단위 간격
다양한 분 단위 간격을 설정합니다 (1, 5, 15, 30분).
1 min
01
02
03
04
05
06
07
08
09
10
11
12
00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
15 min
01
02
03
04
05
06
07
08
09
10
11
12
00
15
30
45
30 min
01
02
03
04
05
06
07
08
09
10
11
12
00
30
TSX
1"use client";
2
3import { TimePicker } from "motile-ui";
4
5export default function MinuteStepExample() {
6 return (
7 <div style={{ display: "flex", gap: "32px", flexWrap: "wrap", justifyContent: "center" }}>
8 <div style={{ display: "flex", flexDirection: "column", gap: "8px", alignItems: "center" }}>
9 <div style={{ fontSize: "14px", color: "#666" }}>1 min</div>
10 <TimePicker.Root minuteStep={1}>
11 <TimePicker.Column type="hour" />
12 <TimePicker.Column type="minute" />
13 <TimePicker.Highlight style={{ backgroundColor: "#fecaca" }} />
14 </TimePicker.Root>
15 </div>
16 <div style={{ display: "flex", flexDirection: "column", gap: "8px", alignItems: "center" }}>
17 <div style={{ fontSize: "14px", color: "#666" }}>15 min</div>
18 <TimePicker.Root minuteStep={15}>
19 <TimePicker.Column type="hour" />
20 <TimePicker.Column type="minute" />
21 <TimePicker.Highlight style={{ backgroundColor: "#bfdbfe" }} />
22 </TimePicker.Root>
23 </div>
24 <div style={{ display: "flex", flexDirection: "column", gap: "8px", alignItems: "center" }}>
25 <div style={{ fontSize: "14px", color: "#666" }}>30 min</div>
26 <TimePicker.Root minuteStep={30}>
27 <TimePicker.Column type="hour" />
28 <TimePicker.Column type="minute" />
29 <TimePicker.Highlight style={{ backgroundColor: "#bbf7d0" }} />
30 </TimePicker.Root>
31 </div>
32 </div>
33 );
34}전체 너비
fullWidth 속성으로 TimePicker가 부모 요소의 전체 너비를 차지하게 할 수 있습니다.
Fixed Width (200px)
01
02
03
04
05
06
07
08
09
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
AM
PM
Full Width
01
02
03
04
05
06
07
08
09
10
11
12
00
05
10
15
20
25
30
35
40
45
50
55
AM
PM
TSX
1"use client";
2
3import { TimePicker } from "motile-ui";
4
5export default function FullWidthExample() {
6 return (
7 <div style={{ display: "flex", flexDirection: "column", gap: "24px", width: "100%" }}>
8 <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
9 <div style={{ fontSize: "14px", color: "#666" }}>Fixed Width (200px)</div>
10 <TimePicker.Root>
11 <TimePicker.Column type="hour" />
12 <TimePicker.Column type="minute" />
13 <TimePicker.Column type="period" />
14 <TimePicker.Highlight />
15 </TimePicker.Root>
16 </div>
17 <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
18 <div style={{ fontSize: "14px", color: "#666" }}>Full Width</div>
19 <TimePicker.Root style={{ width: "100%" }}>
20 <TimePicker.Column type="hour" />
21 <TimePicker.Column type="minute" />
22 <TimePicker.Column type="period" />
23 <TimePicker.Highlight />
24 </TimePicker.Root>
25 </div>
26 </div>
27 );
28}