TimePicker 时间选择器

用于选择或输入时间。

基础用法

通过 v-model 绑定时间值。

选择时间

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

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

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

<template>
  <ZcTimePicker v-model="value" placeholder="选择时间" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

固定时间范围

通过 disabled-hours、disabled-minutes、disabled-seconds 限制可选时间。

选择时间

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

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

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

<template>
  <ZcTimePicker v-model="value" :disabled-hours="disabledHours" placeholder="选择时间" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')

const disabledHours = () => {
  return [0, 1, 2, 3, 4, 5, 6, 7, 22, 23]
}
</script>

范围选择

设置 is-range 开启范围选择。

请选择时间

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

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

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

<template>
  <ZcTimePicker v-model="value" is-range range-separator="至" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

TimePicker API

Props

参数	说明	类型	默认值
modelValue	绑定值	string	''
placeholder	占位文本	string	'请选择时间'
disabled	是否禁用	boolean	false
readonly	是否只读	boolean	false
clearable	是否可清空	boolean	false
format	显示格式	string	'HH:mm:ss'
valueFormat	绑定值格式	string	'HH:mm:ss'
size	尺寸	'large' | 'medium' | 'small'	'medium'
isRange	是否为范围选择	boolean	false
startPlaceholder	范围选择时起始占位文本	string	'开始时间'
endPlaceholder	范围选择时结束占位文本	string	'结束时间'
rangeSeparator	范围选择时的分隔符	string	'至'
step	时间步长	{ hours?: number, minutes?: number, seconds?: number }	''
disabledHours	禁用的小时	() => number[]	undefined
disabledMinutes	禁用的分钟	(hour: number) => number[]	undefined
disabledSeconds	禁用的秒	(hour: number, minute: number) => number[]	undefined

Events

事件名	说明	回调参数
change	值变化时触发	(value: string)
focus	获取焦点时触发	(event: FocusEvent)
blur	失去焦点时触发	(event: FocusEvent)