1# TimePicker 2 3时间选择组件，根据指定参数创建选择器，支持选择小时及分钟。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17TimePicker(options?: TimePickerOptions) 18 19默认以24小时的时间区间创建滑动选择器。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 描述 | 26| ------- | ----------------------------------------------- | ---- | ------------------------ | 27| options | [TimePickerOptions](#timepickeroptions对象说明) | 否 | 配置时间选择组件的参数。 | 28 29## TimePickerOptions对象说明 30 31| 名称 | 类型 | 必填 | 说明 | 32| -------------------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 33| selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 34| format<sup>11+</sup> | [TimePickerFormat](#timepickerformat11枚举说明) | 否 | 指定需要显示的TimePicker的格式。<br/>默认值：TimePickerFormat.HOUR_MINUTE | 35 36## TimePickerFormat<sup>11+</sup>枚举说明 37 38| 名称 | 说明 | 39| ------------------ | ------------------------ | 40| HOUR_MINUTE | 按照小时和分显示。 | 41| HOUR_MINUTE_SECOND | 按照小时、分钟和秒显示。 | 42 43## 属性 44 45除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 46 47| 名称 | 参数类型 | 描述 | 48| -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 49| useMilitaryTime | boolean | 展示时间是否为24小时制。<br/>默认值：false<br />**说明：**当展示时间为12小时制时，上下午与小时无联动关系。 | 50| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值：<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类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值：<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类型说明) | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} | 53| loop<sup>11+</sup> | boolean | 是否启用循环模式。<br/>默认值：true，true表示启用循环模式，false表示不启用循环模式。 | 54 55## 事件 56 57除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 58 59| 名称 | 功能描述 | 60| ---------------------------------------- | ----------- | 61| onChange(callback: (value: TimePickerResult ) => void) | 选择时间时触发该事件。 | 62 63## TimePickerResult对象说明 64 65返回值为24小时制时间。 66 67| 名称 | 参数类型 | 描述 | 68| -------------------- | -------- | ----------------------------------- | 69| hour | number | 选中时间的时。<br/>取值范围：[0-23] | 70| minute | number | 选中时间的分。<br/>取值范围：[0-59] | 71| second<sup>11+</sup> | number | 选中时间的秒。<br/>取值范围：[0-59] | 72 73 74## 示例 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('切换12小时制/24小时制') 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 >= 0) { 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
