• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 时间滑动选择器弹窗
2
3以24小时的时间区间创建时间滑动选择器，展示在弹窗上。
4
5>  **说明：**
6>
7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## TimePickerDialog.show
10
11show(options?: TimePickerDialogOptions)
12
13定义时间滑动选择器弹窗并弹出。
14
15**TimePickerDialogOptions参数：**
16
17
18| 参数名 | 参数类型 | 必填 | 参数描述 |
19| -------- | -------- | -------- | -------- |
20| selected | Date | 否 | 设置当前选中的时间。<br/>默认值：当前系统时间 |
21| useMilitaryTime | boolean | 否 | 展示时间是否为24小时制，默认为12小时制。<br/>默认值：false |
22| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
23| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
24| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中时间改变时触发该回调。 |
25
26## 示例
27
28```ts
29// xxx.ets
30@Entry
31@Component
32struct TimePickerDialogExample {
33  private selectTime: Date = new Date('2020-12-25T08:30:00')
34
35  build() {
36    Column() {
37      Button("TimePickerDialog 12小时制")
38        .margin(20)
39        .onClick(() => {
40          TimePickerDialog.show({
41            selected: this.selectTime,
42            onAccept: (value: TimePickerResult) => {
43              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
44              this.selectTime.setHours(value.hour, value.minute)
45              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
46            },
47            onCancel: () => {
48              console.info("TimePickerDialog:onCancel()")
49            },
50            onChange: (value: TimePickerResult) => {
51              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
52            }
53          })
54        })
55      Button("TimePickerDialog 24小时制")
56        .margin(20)
57        .onClick(() => {
58          TimePickerDialog.show({
59            selected: this.selectTime,
60            useMilitaryTime: true,
61            onAccept: (value: TimePickerResult) => {
62              this.selectTime.setHours(value.hour, value.minute)
63              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
64            },
65            onCancel: () => {
66              console.info("TimePickerDialog:onCancel()")
67            },
68            onChange: (value: TimePickerResult) => {
69              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
70            }
71          })
72        })
73    }.width('100%')
74  }
75}
76```