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**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------- | ----------------------------------------------- | ---- | ------------------------ | 29| options | [TimePickerOptions](#timepickeroptions对象说明) | 否 | 配置时间选择组件的参数。 | 30 31## TimePickerOptions对象说明 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35| 名称 | 类型 | 必填 | 说明 | 36| -------------------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 37| selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| format<sup>11+</sup> | [TimePickerFormat](#timepickerformat11枚举说明) | 否 | 指定需要显示的TimePicker的格式。<br/>默认值：TimePickerFormat.HOUR_MINUTE <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 39 40## TimePickerFormat<sup>11+</sup>枚举说明 41 42**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46| 名称 | 说明 | 47| ------------------ | ------------------------ | 48| HOUR_MINUTE | 按照小时和分显示。 | 49| HOUR_MINUTE_SECOND | 按照小时、分钟和秒显示。 | 50 51## 属性 52 53除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 54 55### useMilitaryTime 56 57useMilitaryTime(value: boolean) 58 59设置展示时间是否为24小时制。当展示时间为12小时制时，上下午与小时无联动关系。 60 61**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65**参数：** 66 67| 参数名 | 类型 | 必填 | 说明 | 68| ------ | ------- | ---- | ------------------------------------------ | 69| value | boolean | 是 | 展示时间是否为24小时制。<br/>默认值：false | 70 71### disappearTextStyle<sup>10+</sup> 72 73disappearTextStyle(value: PickerTextStyle) 74 75设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 85| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 86 87### textStyle<sup>10+</sup> 88 89textStyle(value: PickerTextStyle) 90 91设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 92 93**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97**参数：** 98 99| 参数名 | 类型 | 必填 | 说明 | 100| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 101| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 102 103### selectedTextStyle<sup>10+</sup> 104 105selectedTextStyle(value: PickerTextStyle) 106 107设置选中项的文本颜色、字号、字体粗细。 108 109**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 110 111**系统能力：** SystemCapability.ArkUI.ArkUI.Full 112 113**参数：** 114 115| 参数名 | 类型 | 必填 | 说明 | 116| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 117| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 选中项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} | 118 119### loop<sup>11+</sup> 120 121loop(value: boolean) 122 123设置是否启用循环模式。 124 125**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132| ------ | ------- | ---- | ------------------------------------------------------------ | 133| value | boolean | 是 | 是否启用循环模式。<br/>默认值：true，true表示启用循环模式，false表示不启用循环模式。 | 134 135### dateTimeOptions<sup>12+</sup> 136 137dateTimeOptions(value: DateTimeOptions) 138 139设置时分秒是否显示前置0。 140 141**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145**参数：** 146 147| 参数名 | 类型 | 必填 | 说明 | 148| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 149| value | [DateTimeOptions](../../apis-localization-kit/js-apis-intl.md#datetimeoptions) | 是 | 设置时分秒是否显示前置0，目前只支持设置hour、minute和second参数。<br/>默认值：<br/>hour: 24小时制默认为"2-digit"，即有前置0；12小时制默认为"numeric"，即没有前置0。<br/>minute: 默认为"2-digit"，即有前置0。<br/>second: 默认为"2-digit"，即有前置0。<br/> | 150 151### enableHapticFeedback<sup>12+</sup> 152 153enableHapticFeedback(enable: boolean) 154 155**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 156 157**系统能力：** SystemCapability.ArkUI.ArkUI.Full 158 159| 参数名 | 类型 | 必填 | 说明 | 160| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 161| enable | boolean | 是 | 是否支持触控反馈。<br/>默认值：true，true表示开启触控反馈，false表示不开启触控反馈。<br/>设置为true后是否生效，还取决于系统的硬件是否支持。 | 162 163## 事件 164 165除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 166 167### onChange 168 169onChange(callback: (value: TimePickerResult ) => void) 170 171选择时间时触发该事件。 172 173**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 174 175**系统能力：** SystemCapability.ArkUI.ArkUI.Full 176 177**参数：** 178 179| 参数名 | 类型 | 必填 | 说明 | 180| ------ | --------------------------------------------- | ---- | -------------- | 181| value | [TimePickerResult](#timepickerresult对象说明) | 是 | 24小时制时间。 | 182 183## TimePickerResult对象说明 184 185返回值为24小时制时间。 186 187**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191| 名称 | 类型 | 只读 | 可选 | 说明 | 192| -------------------- | ------ | ---- | ---- | ----------------------------------- | 193| hour | number | 否 | 否 | 选中时间的时。<br/>取值范围：[0-23] | 194| minute | number | 否 | 否 | 选中时间的分。<br/>取值范围：[0-59] | 195| second<sup>11+</sup> | number | 否 | 否 | 选中时间的秒。<br/>取值范围：[0-59] | 196 197## 示例 198 199该示例实现了时间选择组件，根据指定参数创建选择器。 200 201```ts 202// xxx.ets 203@Entry 204@Component 205struct TimePickerExample { 206 @State isMilitaryTime: boolean = false 207 private selectedTime: Date = new Date('2022-07-22T08:00:00') 208 209 build() { 210 Column() { 211 Button('切换12小时制/24小时制') 212 .margin(30) 213 .onClick(() => { 214 this.isMilitaryTime = !this.isMilitaryTime 215 }) 216 TimePicker({ 217 selected: this.selectedTime, 218 }) 219 .useMilitaryTime(this.isMilitaryTime) 220 .onChange((value: TimePickerResult) => { 221 if(value.hour >= 0) { 222 this.selectedTime.setHours(value.hour, value.minute) 223 console.info('select current date is: ' + JSON.stringify(value)) 224 } 225 }) 226 .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) 227 .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) 228 .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) 229 }.width('100%') 230 } 231} 232``` 233 234
