1# TimePicker 2 3The **\<TimePicker>** component allows users to select a time (with the hour and minute) 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## Attributes 28 29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 30 31| Name | Type | Description | 32| -------------------------------- | ---------------------------------------- | ----------------------------------- | 33| useMilitaryTime | boolean | Whether to display time in 24-hour format. The value cannot be modified dynamically.<br>Default value: **false**| 34 35 36## Events 37 38In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 39 40| Name | Description | 41| ---------------------------------------- | ----------- | 42| onChange(callback: (value: TimePickerResult ) => void) | Triggered when a time is selected.| 43 44## TimePickerResult 45 46| Name | Type | Description | 47| ------ | ------ | ------- | 48| hour | number | Hour portion of the selected time.| 49| minute | number | Minute portion of the selected time.| 50 51 52## Example 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
