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开始，该参数支持[$$](../../../ui/state-management/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| start<sup>18+</sup> | Date | 否 | 指定时间选择组件的起始时间。<br/>默认值：Date(0, 0, 0, 0, 0, 0)，仅生效设置日期的小时和分钟。<br/>设定了start、end，且为非默认值的场景下，loop不生效。 <br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 40| end<sup>18+</sup> | Date | 否 | 指定时间选择组件的结束时间。<br/>默认值：Date(0, 0, 0, 23, 59, 59)，仅生效设置日期的小时和分钟。<br/>设定了start、end，且为非默认值的场景下，loop不生效。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 41 42> **说明：** 43> 44> 在TimePicker组件滑动过程中修改TimePickerOptions中的属性（selected、start、end），会导致这些属性无法生效。 45> Date对象用于处理日期和时间。 46> 47> **方式1：** new Date() 48> 49> 获取系统当前日期和时间。 50> 51> **方式2：** new Date(value: number | string) 52> 53> | 参数名 | 类型 | 必填 | 说明 | 54> | ------- | ------ | ---- | ------ | 55> | value | number \| string | 是 | 设置日期格式。<br/> number：毫秒，自1970年1月1日 00:00:00以来的毫秒数。<br/> string：时间格式的字符串，如 ‘2025-02-20 08:00:00’ 或 ‘2025-02-20T08:00:00’。| 56> 57> **方式3：** new Date(year: number, monthIndex: number, date?: number, hours?: number, minutes?: number, seconds?: number, ms?: number) 58> 59> | 参数名 | 类型 | 必填 | 说明 | 60> | --------| ------ | ---- | ------ | 61> | year | number | 是 | 设置年份，例如：2025。| 62> | monthIndex | number | 是 | 设置月份索引，例如：2，代表3月份。| 63> | date | number | 否 | 设置日期，例如：10。（如果设置hours，则date不能省略）| 64> | hours | number | 否 | 设置小时，例如：15。（如果设置minutes，则hours不能省略）| 65> | minutes | number | 否 | 设置分钟，例如：20。（如果设置seconds，则minutes不能省略）| 66> | seconds | number | 否 | 设置秒，例如：20。（如果设置ms，则seconds不能省略）| 67> | ms | number | 否 | 设置毫秒，例如：10。| 68 69## TimePickerFormat<sup>11+</sup>枚举说明 70 71**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75| 名称 | 说明 | 76| ------------------ | ------------------------ | 77| HOUR_MINUTE | 按照小时和分显示。 | 78| HOUR_MINUTE_SECOND | 按照小时、分钟和秒显示。 | 79 80**异常情形说明：** 81 82| 异常情形 | 对应结果 | 83| -------- | ------------------------------------------------------------ | 84| 起始时间晚于结束时间 | 起始时间、结束时间都为默认值 | 85| 选中时间早于起始时间 | 选中时间为起始时间 | 86| 选中时间晚于结束时间 | 选中时间为结束时间 | 87| 起始时间晚于当前系统时间，选中时间未设置 | 选中时间为起始时间 | 88| 结束时间早于当前系统时间，选中时间未设置 | 选中时间为结束时间 | 89| 时间格式不符合规范，如'01:61:61' | 取默认值 | 90 91## 属性 92 93除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 94 95### useMilitaryTime 96 97useMilitaryTime(value: boolean) 98 99设置展示时间是否为24小时制。当展示时间为12小时制时，上下午与小时无联动关系。 100 101**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 102 103**系统能力：** SystemCapability.ArkUI.ArkUI.Full 104 105**参数：** 106 107| 参数名 | 类型 | 必填 | 说明 | 108| ------ | ------- | ---- | ------------------------------------------ | 109| value | boolean | 是 | 展示时间是否为24小时制。<br/>默认值：false，false表示展示时间为12小时制，true表示展示时间为24小时制。 | 110 111### useMilitaryTime<sup>18+</sup> 112 113useMilitaryTime(isMilitaryTime: Optional\<boolean>) 114 115设置展示时间是否为24小时制。与[useMilitaryTime](#usemilitarytime)相比，isMilitaryTime参数新增了对undefined类型的支持。 116 117**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 118 119**系统能力：** SystemCapability.ArkUI.ArkUI.Full 120 121**参数：** 122 123| 参数名 | 类型 | 必填 | 说明 | 124| ------ | ------- | ---- | ------------------------------------------ | 125| isMilitaryTime | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | 是 | 展示时间是否为24小时制。<br/>当isMilitaryTime的值为undefined时，默认值：false，false表示展示时间为12小时制，true表示展示时间为24小时制。 | 126 127### disappearTextStyle<sup>10+</sup> 128 129disappearTextStyle(value: PickerTextStyle) 130 131设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 132 133**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 134 135**系统能力：** SystemCapability.ArkUI.ArkUI.Full 136 137**参数：** 138 139| 参数名 | 类型 | 必填 | 说明 | 140| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 141| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 142 143### disappearTextStyle<sup>18+</sup> 144 145disappearTextStyle(style: Optional\<PickerTextStyle>) 146 147设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。与[disappearTextStyle](#disappeartextstyle10)<sup>10+</sup>相比，style参数新增了对undefined类型的支持。 148 149**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 150 151**系统能力：** SystemCapability.ArkUI.ArkUI.Full 152 153**参数：** 154 155| 参数名 | 类型 | 必填 | 说明 | 156| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 157| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明)> | 是 | 所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>当style的值为undefined时，默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 158 159### textStyle<sup>10+</sup> 160 161textStyle(value: PickerTextStyle) 162 163设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 164 165**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 166 167**系统能力：** SystemCapability.ArkUI.ArkUI.Full 168 169**参数：** 170 171| 参数名 | 类型 | 必填 | 说明 | 172| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 173| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 174 175### textStyle<sup>18+</sup> 176 177textStyle(style: Optional\<PickerTextStyle>) 178 179设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。与[textStyle](#textstyle10)<sup>10+</sup>相比，style参数新增了对undefined类型的支持。 180 181**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 182 183**系统能力：** SystemCapability.ArkUI.ArkUI.Full 184 185**参数：** 186 187| 参数名 | 类型 | 必填 | 说明 | 188| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 189| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明)> | 是 | 所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>当style的值为undefined时，默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 190 191### selectedTextStyle<sup>10+</sup> 192 193selectedTextStyle(value: PickerTextStyle) 194 195设置选中项的文本颜色、字号、字体粗细。 196 197**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 198 199**系统能力：** SystemCapability.ArkUI.ArkUI.Full 200 201**参数：** 202 203| 参数名 | 类型 | 必填 | 说明 | 204| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 205| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 是 | 选中项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff007dff',<br/>font: {<br/>size: '20fp', <br/>weight: FontWeight.Medium<br/>}<br/>} | 206 207### selectedTextStyle<sup>18+</sup> 208 209selectedTextStyle(style: Optional\<PickerTextStyle>) 210 211设置选中项的文本颜色、字号、字体粗细。与[selectedTextStyle](#selectedtextstyle10)<sup>10+</sup>相比，style参数新增了对undefined类型的支持。 212 213**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217**参数：** 218 219| 参数名 | 类型 | 必填 | 说明 | 220| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 221| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明)> | 是 | 选中项的文本颜色、字号、字体粗细。<br/>当style的值为undefined时，默认值：<br/>{<br/>color: '#ff007dff',<br/>font: {<br/>size: '20fp', <br/>weight: FontWeight.Medium<br/>}<br/>} | 222 223### loop<sup>11+</sup> 224 225loop(value: boolean) 226 227设置是否启用循环模式。 228 229**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 230 231**系统能力：** SystemCapability.ArkUI.ArkUI.Full 232 233**参数：** 234 235| 参数名 | 类型 | 必填 | 说明 | 236| ------ | ------- | ---- | ------------------------------------------------------------ | 237| value | boolean | 是 | 是否启用循环模式。<br/>默认值：true，true表示启用循环模式，false表示不启用循环模式。 | 238 239### loop<sup>18+</sup> 240 241loop(isLoop: Optional\<boolean>) 242 243设置是否启用循环模式。与[loop](#loop11)<sup>11+</sup>相比，isLoop参数新增了对undefined类型的支持。 244 245**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 246 247**系统能力：** SystemCapability.ArkUI.ArkUI.Full 248 249**参数：** 250 251| 参数名 | 类型 | 必填 | 说明 | 252| ------ | ------- | ---- | ------------------------------------------------------------ | 253| isLoop | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | 是 | 是否启用循环模式。<br/>当isLoop的值为undefined时，默认值：true，true表示启用循环模式，false表示不启用循环模式。 | 254 255### dateTimeOptions<sup>12+</sup> 256 257dateTimeOptions(value: DateTimeOptions) 258 259设置时分秒是否显示前置0。 260 261**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 262 263**系统能力：** SystemCapability.ArkUI.ArkUI.Full 264 265**参数：** 266 267| 参数名 | 类型 | 必填 | 说明 | 268| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 269| 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。| 270 271### dateTimeOptions<sup>18+</sup> 272 273dateTimeOptions(timeFormat: Optional\<DateTimeOptions>) 274 275设置时分秒是否显示前置0。与[dateTimeOptions](#datetimeoptions12)<sup>12+</sup>相比，timeFormat参数新增了对undefined类型的支持。 276 277**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 278 279**系统能力：** SystemCapability.ArkUI.ArkUI.Full 280 281**参数：** 282 283| 参数名 | 类型 | 必填 | 说明 | 284| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 285| timeFormat | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[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/> 当hour、minute、second的值设置为undefined时，显示效果与其默认值规则一致。| 286 287### enableHapticFeedback<sup>12+</sup> 288 289enableHapticFeedback(enable: boolean) 290 291设置是否支持触控反馈。 292 293**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 294 295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 296 297| 参数名 | 类型 | 必填 | 说明 | 298| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 299| enable | boolean | 是 | 是否支持触控反馈。<br/>默认值：true，true表示开启触控反馈，false表示不开启触控反馈。<br/>设置为true后是否生效，还取决于系统的硬件是否支持。 | 300 301### enableHapticFeedback<sup>18+</sup> 302 303enableHapticFeedback(enable: Optional\<boolean>) 304 305·设置是否支持触控反馈。与[enableHapticFeedback](#enablehapticfeedback12)<sup>12+</sup>相比，enable参数新增了对undefined类型的支持。 306 307**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 308 309**系统能力：** SystemCapability.ArkUI.ArkUI.Full 310 311| 参数名 | 类型 | 必填 | 说明 | 312| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 313| enable | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | 是 | 是否支持触控反馈。<br/>当enable的值为undefined时，默认值：true，true表示开启触控反馈，false表示不开启触控反馈。<br/>设置为true后是否生效，还取决于系统的硬件是否支持。 | 314 315> **说明：** 316> 317> 开启触控反馈时，需要在工程的module.json5中配置requestPermissions字段开启振动权限，配置如下： 318> ```json 319> "requestPermissions": [ 320> { 321> "name": "ohos.permission.VIBRATE", 322> } 323> ] 324> ``` 325 326### enableCascade<sup>18+</sup> 327 328enableCascade(enable: boolean) 329 330在设置12小时制时，上午和下午的标识会根据小时数自动切换。 331 332**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 333 334**系统能力：** SystemCapability.ArkUI.ArkUI.Full 335 336| 参数名 | 类型 | 必填 | 说明 | 337| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 338| enable | boolean | 是 | 在12小时制时，设置上午和下午的标识是否会根据小时数自动切换。<br/>默认值：false，false表示不开启自动切换，true表示开启自动切换。<br/>设置为true后，仅当loop参数同时为true时生效。<br/> | 339 340### digitalCrownSensitivity<sup>18+</sup> 341digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 342 343设置表冠灵敏度。 344 345**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 346 347**系统能力：** SystemCapability.ArkUI.ArkUI.Full 348 349| 参数名 | 参数类型 | 必填 | 参数描述 | 350| ----- | ---------------------------------------- | ---- | ------------------------- | 351| sensitivity | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[CrownSensitivity](ts-appendix-enums.md#crownsensitivity18)> | 是 | 表冠灵敏度。 | 352 353> **说明：** 354> 355> 用于穿戴设备圆形屏幕使用。 356 357## 事件 358 359除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 360 361### onChange 362 363onChange(callback: (value: TimePickerResult ) => void) 364 365选择时间时触发该事件。 366 367**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 368 369**系统能力：** SystemCapability.ArkUI.ArkUI.Full 370 371**参数：** 372 373| 参数名 | 类型 | 必填 | 说明 | 374| ------ | --------------------------------------------- | ---- | -------------- | 375| value | [TimePickerResult](#timepickerresult对象说明) | 是 | 24小时制时间。 | 376 377### onChange<sup>18+</sup> 378 379onChange(callback: Optional\<OnTimePickerChangeCallback>) 380 381滑动TimePicker后，时间选项归位至选中项位置时，触发该回调。与[onChange](#onchange)相比，callback参数新增了对undefined类型的支持。 382 383**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 384 385**系统能力：** SystemCapability.ArkUI.ArkUI.Full 386 387**参数：** 388 389| 参数名 | 类型 | 必填 | 说明 | 390| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 391| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[OnTimePickerChangeCallback](#ontimepickerchangecallback18)> | 是 | 选择时间时触发该回调。<br/>当callback的值为undefined时，不使用回调函数。 | 392 393### onEnterSelectedArea<sup>18+</sup> 394 395onEnterSelectedArea(callback: Callback\<TimePickerResult>) 396 397滑动TimePicker过程中，选项进入分割线区域内，触发该回调。 398 399与onChange事件的差别在于，该事件的触发时机早于onChange事件，当当前滑动列滑动距离超过选中项高度的一半时，选项此时已经进入分割线区域内，会触发该事件。当enableCascade设置为true时，由于上午/下午列与小时列存在联动关系，不建议使用该回调。该回调标识的是滑动过程中选项进入分割线区域内的节点，而联动变化的选项并不涉及滑动，因此，回调的返回值中，仅当前滑动列的值会正常变化，其余未滑动列的值保持不变。 400 401**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 402 403**系统能力：** SystemCapability.ArkUI.ArkUI.Full 404 405**参数：** 406 407| 参数名 | 类型 | 必填 | 说明 | 408| -------- | -------------------------- | ---- | ------------------------------------------ | 409| callback | Callback\<[TimePickerResult](#timepickerresult对象说明)> | 是 | 滑动TimePicker过程中，选项进入分割线区域时触发的回调。 | 410 411## OnTimePickerChangeCallback<sup>18+</sup> 412 413type OnTimePickerChangeCallback = (value: TimePickerResult) => void 414 415选择时间时触发该事件。 416 417**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 418 419**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 420 421**系统能力：** SystemCapability.ArkUI.ArkUI.Full 422 423**参数：** 424 425| 参数名 | 类型 | 必填 | 说明 | 426| ------ | --------------------------------------------- | ---- | -------------- | 427| value | [TimePickerResult](#timepickerresult对象说明) | 是 | 24小时制时间。 | 428 429## TimePickerResult对象说明 430 431返回值为24小时制时间。 432 433**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 434 435**系统能力：** SystemCapability.ArkUI.ArkUI.Full 436 437| 名称 | 类型 | 只读 | 可选 | 说明 | 438| -------------------- | ------ | ---- | ---- | ----------------------------------- | 439| hour | number | 否 | 否 | 选中时间的时。<br/>取值范围：[0-23] | 440| minute | number | 否 | 否 | 选中时间的分。<br/>取值范围：[0-59] | 441| second<sup>11+</sup> | number | 否 | 否 | 选中时间的秒。<br/>取值范围：[0-59] | 442 443## 示例 444 445### 示例1（设置文本样式） 446 447该示例通过配置disappearTextStyle、textStyle、selectedTextStyle实现文本选择器中的文本样式。 448 449```ts 450// xxx.ets 451@Entry 452@Component 453struct TimePickerExample { 454 private selectedTime: Date = new Date('2022-07-22T08:00:00') 455 456 build() { 457 TimePicker({ 458 selected: this.selectedTime 459 }) 460 .disappearTextStyle({ color: '#004aaf', font: { size: 24, weight: FontWeight.Lighter } }) 461 .textStyle({ color: Color.Black, font: { size: 26, weight: FontWeight.Normal } }) 462 .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } }) 463 .onChange((value: TimePickerResult) => { 464 if (value.hour >= 0) { 465 this.selectedTime.setHours(value.hour, value.minute) 466 console.info('select current date is: ' + JSON.stringify(value)) 467 } 468 }) 469 } 470} 471``` 472 473 474 475### 示例2（切换小时制） 476 477该示例通过配置useMilitaryTime实现12小时制、24小时制的切换。 478 479```ts 480// xxx.ets 481@Entry 482@Component 483struct TimePickerExample { 484 @State isMilitaryTime: boolean = false 485 private selectedTime: Date = new Date('2022-07-22T08:00:00') 486 487 build() { 488 Column() { 489 Button('切换12小时制/24小时制') 490 .margin(30) 491 .onClick(() => { 492 this.isMilitaryTime = !this.isMilitaryTime 493 }) 494 495 TimePicker({ 496 selected: this.selectedTime 497 }) 498 .useMilitaryTime(this.isMilitaryTime) 499 .onChange((value: TimePickerResult) => { 500 if (value.hour >= 0) { 501 this.selectedTime.setHours(value.hour, value.minute) 502 console.info('select current time is: ' + JSON.stringify(value)) 503 } 504 }) 505 .onEnterSelectedArea((value: TimePickerResult) => { 506 console.info('item enter selected area, time is: ' + JSON.stringify(value)) 507 }) 508 }.width('100%') 509 } 510} 511``` 512 513 514 515### 示例3（设置时间格式） 516 517该示例使用format、dateTimeOptions设置TimePicker时间格式。 518 519```ts 520// xxx.ets 521@Entry 522@Component 523struct TimePickerExample { 524 private selectedTime: Date = new Date('2022-07-22T08:00:00') 525 526 build() { 527 Column() { 528 TimePicker({ 529 selected: this.selectedTime, 530 format: TimePickerFormat.HOUR_MINUTE_SECOND 531 }) 532 .dateTimeOptions({ hour: "numeric", minute: "2-digit", second: "2-digit" }) 533 .onChange((value: TimePickerResult) => { 534 if (value.hour >= 0) { 535 this.selectedTime.setHours(value.hour, value.minute) 536 console.info('select current date is: ' + JSON.stringify(value)) 537 } 538 }) 539 }.width('100%') 540 } 541} 542``` 543 544 545 546### 示例4（设置循环滚动） 547 548该示例使用loop设置TimePicker是否循环滚动。 549 550```ts 551// xxx.ets 552@Entry 553@Component 554struct TimePickerExample { 555 @State isLoop: boolean = true 556 private selectedTime: Date = new Date('2022-07-22T12:00:00') 557 558 build() { 559 Column() { 560 TimePicker({ 561 selected: this.selectedTime 562 }) 563 .loop(this.isLoop) 564 .onChange((value: TimePickerResult) => { 565 if (value.hour >= 0) { 566 this.selectedTime.setHours(value.hour, value.minute) 567 console.info('select current date is: ' + JSON.stringify(value)) 568 } 569 }) 570 571 Row() { 572 Text('循环滚动').fontSize(20) 573 574 Toggle({ type: ToggleType.Switch, isOn: true }) 575 .onChange((isOn: boolean) => { 576 this.isLoop = isOn 577 }) 578 }.position({ x: '60%', y: '40%' }) 579 580 }.width('100%') 581 } 582} 583``` 584 585 586 587### 示例5（设置时间选择组件的起始时间） 588 589该示例设置TimePicker的起始时间。 590 591```ts 592// xxx.ets 593@Entry 594@Component 595struct TimePickerExample { 596 private selectedTime: Date = new Date('2022-07-22T08:50:00') 597 598 build() { 599 Column() { 600 TimePicker({ 601 selected: this.selectedTime, 602 format: TimePickerFormat.HOUR_MINUTE_SECOND, 603 start: new Date('2022-07-22T08:30:00') 604 }) 605 .dateTimeOptions({ hour: "numeric", minute: "2-digit", second: "2-digit" }) 606 .onChange((value: TimePickerResult) => { 607 if (value.hour >= 0) { 608 this.selectedTime.setHours(value.hour, value.minute) 609 console.info('select current date is: ' + JSON.stringify(value)) 610 } 611 }) 612 }.width('100%') 613 } 614} 615``` 616 617 618### 示例6（设置时间选择组件的结束时间） 619 620该示例设置TimePicker的结束时间。 621 622```ts 623// xxx.ets 624@Entry 625@Component 626struct TimePickerExample { 627 private selectedTime: Date = new Date('2022-07-22T08:50:00') 628 629 build() { 630 Column() { 631 TimePicker({ 632 selected: this.selectedTime, 633 format: TimePickerFormat.HOUR_MINUTE_SECOND, 634 end: new Date('2022-07-22T15:20:00'), 635 }) 636 .dateTimeOptions({ hour: "numeric", minute: "2-digit", second: "2-digit" }) 637 .onChange((value: TimePickerResult) => { 638 if (value.hour >= 0) { 639 this.selectedTime.setHours(value.hour, value.minute) 640 console.info('select current date is: ' + JSON.stringify(value)) 641 } 642 }) 643 }.width('100%') 644 } 645} 646``` 647 648 649 650### 示例7（设置上午下午跟随时间联动） 651 652该示例通过配置enableCascade、loop实现12小时制时上午下午跟随时间联动。 653 654```ts 655// xxx.ets 656@Entry 657@Component 658struct TimePickerExample { 659 private selectedTime: Date = new Date('2022-07-22T08:00:00') 660 661 build() { 662 Column() { 663 TimePicker({ 664 selected: this.selectedTime, 665 }) 666 .enableCascade(true) 667 .loop(true) 668 .onChange((value: TimePickerResult) => { 669 if (value.hour >= 0) { 670 this.selectedTime.setHours(value.hour, value.minute) 671 console.info('select current date is: ' + JSON.stringify(value)) 672 } 673 }) 674 }.width('100%') 675 } 676} 677``` 678 679 680
