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?: TimePickerOptions) 18 19Creates a time picker, which is in 24-hour format by default. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Description | 26| ------- | ----------------------------------------------- | ---- | ------------------------ | 27| options | [TimePickerOptions](#timepickeroptions) | No | Parameters of the time picker.| 28 29## TimePickerOptions 30 31| Name | Type | Mandatory| Description | 32| -------------------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 33| selected | Date | No | Time of the selected item.<br>Default value: current system time<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 34| format<sup>11+</sup> | [TimePickerFormat](#timepickerformat) | No | Time format. | 35 36## TimePickerFormat 37 38| Name | Description | 39| ------------------ | ------------------------ | 40| HOUR_MINUTE | Display hours and minutes. | 41| HOUR_MINUTE_SECOND | Display hours, minutes, and seconds.| 42 43## Attributes 44 45In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 46 47| Name | Type | Description | 48| -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 49| useMilitaryTime | boolean | Whether the display time is in 24-hour format.<br>Default value: **false**<br>**NOTE**<br>When in the 12-hour format, the AM/PM zone does not change depending on the hour portion.| 50| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} | 51| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>}<br>} | 52| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} | 53| loop<sup>11+</sup> | boolean | Whether to enable loop mode.<br>Default value: **true**<br>The value **true** means to enable loop mode, and **false** means the opposite.| 54 55## Events 56 57In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 58 59| Name | Description | 60| ---------------------------------------- | ----------- | 61| onChange(callback: (value: TimePickerResult ) => void) | Triggered when a time is selected.| 62 63## TimePickerResult 64 65Describes a time in 24-hour format. 66 67| Name | Type| Description | 68| -------------------- | -------- | ----------------------------------- | 69| hour | number | Hour portion of the selected time.<br>Value range: [0-23]| 70| minute | number | Minute portion of the selected time.<br>Value range: [0-59]| 71| second<sup>11+</sup> | number | Second portion of the selected time.<br>Value range: [0-59]| 72 73 74## Example 75 76```ts 77// xxx.ets 78@Entry 79@Component 80struct TimePickerExample { 81 @State isMilitaryTime: boolean = false 82 private selectedTime: Date = new Date('2022-07-22T08:00:00') 83 84 build() { 85 Column() { 86 Button ('Switch Time Format') 87 .margin(30) 88 .onClick(() => { 89 this.isMilitaryTime = !this.isMilitaryTime 90 }) 91 TimePicker({ 92 selected: this.selectedTime, 93 }) 94 .useMilitaryTime(this.isMilitaryTime) 95 .onChange((value: TimePickerResult) => { 96 if(value.hour) { 97 this.selectedTime.setHours(value.hour, value.minute) 98 console.info('select current date is: ' + JSON.stringify(value)) 99 } 100 }) 101 .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) 102 .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) 103 .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) 104 }.width('100%') 105 } 106} 107``` 108 109 110
