• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# TimePicker
2
3选择时间的滑动选择器组件。
4
5> **说明:**
6>
7> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10## 权限列表
11
1213
14
15## 子组件
16
1718
19
20## 接口
21
22TimePicker(options?: {selected?: Date})
23
24默认以00: 00至23: 59的时间区间创建滑动选择器。
25
26**参数:**
27
28| 参数名      | 参数类型 | 必填   | 默认值    | 参数描述      |
29| -------- | ---- | ---- | ------ | --------- |
30| selected | Date | 否    | 当前系统时间 | 设置选中项的时间。 |
31
32## 属性
33
34| 名称              | 参数类型    | 默认值   | 描述                    |
35| --------------- | ------- | ----- | --------------------- |
36| useMilitaryTime | boolean | false | 展示时间是否为24小时制,不支持动态修改。 |
37
38
39## 事件
40
41| 名称                                       | 功能描述        |
42| ---------------------------------------- | ----------- |
43| onChange(callback: (value: TimePickerResult ) => void) | 选择时间时触发该事件。 |
44
45## TimePickerResult对象说明
46| 名称     | 参数类型   | 描述      |
47| ------ | ------ | ------- |
48| hour   | number | 选中时间的时。 |
49| minute | number | 选中时间的分。 |
50
51
52## 示例
53
54
55### 时间选择器
56
57```ts
58// xxx.ets
59@Entry
60@Component
61struct TimePickerExample {
62  private selectedTime: Date = new Date('7/22/2022 8:00:00')
63
64  build() {
65    Column() {
66      TimePicker({
67        selected: this.selectedTime,
68      })
69      .useMilitaryTime(true)
70      .onChange((date: TimePickerResult) => {
71        console.info('select current date is: ' + JSON.stringify(date))
72      })
73    }.width('100%')
74  }
75}
76```
77
78![zh-cn_image_0000001251292933](figures/zh-cn_image_0000001251292933.gif)
79