1# 时间滑动选择器弹窗 2 3> **说明：** 4> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。 7 8## TimePickerDialog.show 9 10show(options?: TimePickerDialogOptions) 11 12定义时间滑动选择器弹窗并弹出。 13 14- options参数 15 | 参数名 | 参数类型 | 必填 | 参数描述 | 16 | -------- | -------- | -------- | -------- | 17 | selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 | 18 | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。<br/>默认值：false | 19 | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 | 20 | onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 | 21 | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 | 22 23## 示例 24 25### 时间滑动选择器（24小时制）示例 26```ts 27// xxx.ets 28@Entry 29@Component 30struct TimePickerDialogExample01 { 31 @State isUseMilitaryTime: boolean = true; 32 33 build() { 34 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, 35 justifyContent: FlexAlign.Center }) { 36 Button("TimePickerDialog").onClick(() => { 37 TimePickerDialog.show({ 38 useMilitaryTime: this.isUseMilitaryTime, 39 onAccept: (value: TimePickerResult) => { 40 console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); 41 }, 42 onCancel: () => { 43 console.info("TimePickerDialog:onCancel()"); 44 }, 45 onChange: (value: TimePickerResult) => { 46 console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); 47 } 48 }) 49 }) 50 } 51 } 52} 53``` 54  55 56### 时间滑动选择器（12小时制）示例 57 58```ts 59// xxx.ets 60@Entry 61@Component 62struct TimePickerDialogExample02 { 63 @State isUseMilitaryTime: boolean = false; 64 65 build() { 66 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, 67 justifyContent: FlexAlign.Center }) { 68 Button("TimePickerDialog").onClick(() => { 69 TimePickerDialog.show({ 70 useMilitaryTime: this.isUseMilitaryTime, 71 onAccept: (value: TimePickerResult) => { 72 console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); 73 }, 74 onCancel: () => { 75 console.info("TimePickerDialog:onCancel()"); 76 }, 77 onChange: (value: TimePickerResult) => { 78 console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); 79 } 80 }) 81 }) 82 } 83 } 84} 85``` 86 87 
