1# TimePicker 2 3The **\<TimePicker>** component allows users to select a time from the given range. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17TimePicker(options?: {selected?: Date}) 18 19Creates a time picker, which is in 24-hour format by default. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| selected | Date | No| Time of the selected item.<br>Default value: current system time| 26 27 28## Attributes 29 30| Name| Type| Description| 31| -------- | -------- | -------- | 32| useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.<br>Default value: **false**| 33 34 35## Events 36 37| Name | Description | 38| ---------------------------------------- | ----------- | 39| onChange(callback: (value: TimePickerResult ) => void) | Triggered when a time is selected.| 40 41## TimePickerResult 42 43| Name | Type | Description | 44| ------ | ------ | ------- | 45| hour | number | Hour portion of the selected time.| 46| minute | number | Minute portion of the selected time.| 47 48 49## Example 50 51 52### Time Picker 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct TimePickerExample { 59 @State isMilitaryTime: boolean = false 60 private selectedTime: Date = new Date('2022-07-22T08:00:00') 61 62 build() { 63 Column() { 64 Button ('Switch Time Format') 65 .margin({ top: 30 }) 66 .onClick(() => { 67 this.isMilitaryTime = !this.isMilitaryTime 68 }) 69 TimePicker({ 70 selected: this.selectedTime, 71 }) 72 .useMilitaryTime(this.isMilitaryTime) 73 .onChange((value: TimePickerResult) => { 74 this.selectedTime.setHours(value.hour, value.minute) 75 console.info('select current date is: ' + JSON.stringify(value)) 76 }) 77 }.width('100%') 78 } 79} 80``` 81 82 83
