1# Time Picker Dialog Box 2 3You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9## TimePickerDialog.show 10 11show(options?: TimePickerDialogOptions) 12 13Defines and displays a time picker dialog box. 14 15- options parameters 16 | Name| Type| Mandatory| Description| 17 | -------- | -------- | -------- | -------- | 18 | selected | Date | No| Selected time.<br>Default value: current system time| 19 | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**| 20 | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.| 21 | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.| 22 | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.| 23 24## Example 25 26### Time Picker Sample Code (24-Hour Clock) 27```ts 28// xxx.ets 29@Entry 30@Component 31struct TimePickerDialogExample01 { 32 @State isUseMilitaryTime: boolean = true; 33 34 build() { 35 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, 36 justifyContent: FlexAlign.Center }) { 37 Button("TimePickerDialog").onClick(() => { 38 TimePickerDialog.show({ 39 useMilitaryTime: this.isUseMilitaryTime, 40 onAccept: (value: TimePickerResult) => { 41 console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); 42 }, 43 onCancel: () => { 44 console.info("TimePickerDialog:onCancel()"); 45 }, 46 onChange: (value: TimePickerResult) => { 47 console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); 48 } 49 }) 50 }) 51 } 52 } 53} 54``` 55  56 57### Time Picker Sample Code (12-Hour Clock) 58 59```ts 60// xxx.ets 61@Entry 62@Component 63struct TimePickerDialogExample02 { 64 @State isUseMilitaryTime: boolean = false; 65 66 build() { 67 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, 68 justifyContent: FlexAlign.Center }) { 69 Button("TimePickerDialog").onClick(() => { 70 TimePickerDialog.show({ 71 useMilitaryTime: this.isUseMilitaryTime, 72 onAccept: (value: TimePickerResult) => { 73 console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); 74 }, 75 onCancel: () => { 76 console.info("TimePickerDialog:onCancel()"); 77 }, 78 onChange: (value: TimePickerResult) => { 79 console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); 80 } 81 }) 82 }) 83 } 84 } 85} 86``` 87 88 
