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**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name | Type | Mandatory| Description | 28| ------- | ----------------------------------------------- | ---- | ------------------------ | 29| options | [TimePickerOptions](#timepickeroptions) | No | Parameters of the time picker.| 30 31## TimePickerOptions 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35| Name | Type | Mandatory| Description | 36| -------------------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 37| selected | Date | No | Time of the selected item.<br>Default value: current system time<br>Since API version 10, this parameter supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 38| format<sup>11+</sup> | [TimePickerFormat](#timepickerformat11)| No | Time format.<br>Default value: **TimePickerFormat.HOUR_MINUTE**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 39| start<sup>18+</sup> | Date | No | Start time of the time picker.<br>Default value: **Date(0, 0, 0, 0, 0, 0)**; only the hour and minute settings take effect.<br>If both start and end are set to non-default values, the loop feature is disabled.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 40| end<sup>18+</sup> | Date | No | End time of the time picker.<br>Default value: **Date(0, 0, 0, 23, 59, 59)**; only the hour and minute settings take effect.<br>If both start and end are set to non-default values, the loop feature is disabled.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 41 42> **NOTE** 43> 44> Modifying the **TimePickerOptions** properties, such as **selected**, **start**, or **end**, during the scrolling process of the **TimePicker** component may not take effect. 45> The **Date** object is used to handle dates and time. 46> 47> **Method 1**: new Date () 48> 49> Obtains the current system date and time. 50> 51> **Method 2**: new Date(value: number | string) 52> 53> | Name | Type | Mandatory | Description | 54> | ------- | ------ | ---- | ------ | 55> | value | number \| string | Yes | Date format.<br> **number**: number of milliseconds since 00:00:00 on January 1, 1970.<br> **string**: date string in formats such as 2025-02 2025-02-20 08:00:00 or 2025-02 2025-02-20T08:00:00.| 56> 57> **Method 3**: new Date(year: number, monthIndex: number, date?: number, hours?: number, minutes?: number, seconds?: number, ms?: number) 58> 59> | Name | Type | Mandatory | Description | 60> | --------| ------ | ---- | ------ | 61> | year | number | Yes | Year. Example: **2025**.| 62> | monthIndex | number | Yes | Month index, for example, **2** for March.| 63> | date | number | No | Day of the month, for example, **10**. (Required if **hours** is set.) | 64> | hours | number | No | Hour, for example, **15**. (Required if **minutes** is set.) | 65> | minutes | number | No | Minute, for example, **20**. (Required if **seconds** is set.) | 66> | seconds | number | No | Second, for example, **20**. (Required if **ms** is set.) | 67> | ms | number | No | Millisecond, for example, **10**.| 68 69## TimePickerFormat<sup>11+</sup> 70 71**Atomic service API**: This API can be used in atomic services since API version 12. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75| Name | Description | 76| ------------------ | ------------------------ | 77| HOUR_MINUTE | Display hours and minutes. | 78| HOUR_MINUTE_SECOND | Display hours, minutes, and seconds.| 79 80**Handling in the case of exceptions** 81 82| Exception | Result | 83| -------- | ------------------------------------------------------------ | 84| The start time is later than the end time. | Both start time and end time are set to their default values. | 85| The selected time is earlier than the start time. | The selected time is set to the start time. | 86| The selected time is later than the end time. | The selected time is set to the end time. | 87| The start time is later than the current system time, and the selected time is not set. | The selected time is set to the start time.| 88| The end time is earlier than the current system time, and the selected time is not set. | The selected time is set to the end time. | 89| The time format is invalid, such as **'01:61:61'**. | The default value is used. | 90 91## Attributes 92 93In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 94 95### useMilitaryTime 96 97useMilitaryTime(value: boolean) 98 99Sets whether to display time in 24-hour format. When the display time is in 12-hour format, the AM/PM zone does not change depending on the hour portion. 100 101**Atomic service API**: This API can be used in atomic services since API version 11. 102 103**System capability**: SystemCapability.ArkUI.ArkUI.Full 104 105**Parameters** 106 107| Name| Type | Mandatory| Description | 108| ------ | ------- | ---- | ------------------------------------------ | 109| value | boolean | Yes | Whether the display time is in 24-hour format.<br>Default value: **false**| 110 111### useMilitaryTime<sup>18+</sup> 112 113useMilitaryTime(isMilitaryTime: Optional\<boolean>) 114 115Sets whether to display time in 24-hour format. Compared to [useMilitaryTime](#usemilitarytime), this API supports the **undefined** type for the **isMilitaryTime** parameter. 116 117**Atomic service API**: This API can be used in atomic services since API version 18. 118 119**System capability**: SystemCapability.ArkUI.ArkUI.Full 120 121**Parameters** 122 123| Name| Type | Mandatory| Description | 124| ------ | ------- | ---- | ------------------------------------------ | 125| isMilitaryTime | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | Yes | Whether the display time is in 24-hour format.<br>If **isMilitaryTime** is set to **undefined**, the default value **false** is used.| 126 127### disappearTextStyle<sup>10+</sup> 128 129disappearTextStyle(value: PickerTextStyle) 130 131Sets the font color, font size, and font weight for the top and bottom items. 132 133**Atomic service API**: This API can be used in atomic services since API version 11. 134 135**System capability**: SystemCapability.ArkUI.ArkUI.Full 136 137**Parameters** 138 139| Name| Type | Mandatory| Description | 140| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 141| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Yes | Font color, font size, and font weight of the top and bottom items.<br>Default value:<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 147Sets the font color, font size, and font weight for the top and bottom items. Compared to [disappearTextStyle](#disappeartextstyle10)<sup>10+</sup>, this API supports the **undefined** type for the **style** parameter. 148 149**Atomic service API**: This API can be used in atomic services since API version 18. 150 151**System capability**: SystemCapability.ArkUI.ArkUI.Full 152 153**Parameters** 154 155| Name| Type | Mandatory| Description | 156| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 157| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10)> | Yes | Font color, font size, and font weight of the top and bottom items.<br>If **style** is set to **undefined**, the default value is used:<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 163Sets the font color, font size, and font weight for all items except the top, bottom, and selected items. 164 165**Atomic service API**: This API can be used in atomic services since API version 11. 166 167**System capability**: SystemCapability.ArkUI.ArkUI.Full 168 169**Parameters** 170 171| Name| Type | Mandatory| Description | 172| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 173| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Yes | Font color, font size, and font weight 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>} | 174 175### textStyle<sup>18+</sup> 176 177textStyle(style: Optional\<PickerTextStyle>) 178 179Sets the font color, font size, and font weight for all items except the top, bottom, and selected items. Compared to [textStyle](#textstyle10)<sup>10+</sup>, this API supports the **undefined** type for the **style** parameter. 180 181**Atomic service API**: This API can be used in atomic services since API version 18. 182 183**System capability**: SystemCapability.ArkUI.ArkUI.Full 184 185**Parameters** 186 187| Name| Type | Mandatory| Description | 188| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 189| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10)> | Yes | Font color, font size, and font weight of all items except the top, bottom, and selected items.<br>If **style** is set to **undefined**, the default value is used:<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 195Sets the font color, font size, and font weight for the selected item. 196 197**Atomic service API**: This API can be used in atomic services since API version 11. 198 199**System capability**: SystemCapability.ArkUI.ArkUI.Full 200 201**Parameters** 202 203| Name| Type | Mandatory| Description | 204| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 205| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Yes | Font color, font size, and font weight of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} | 206 207### selectedTextStyle<sup>18+</sup> 208 209selectedTextStyle(style: Optional\<PickerTextStyle>) 210 211Sets the font color, font size, and font weight for the selected item. Compared to [selectedTextStyle](#selectedtextstyle10)<sup>10+</sup>, this API supports the **undefined** type for the **style** parameter. 212 213**Atomic service API**: This API can be used in atomic services since API version 18. 214 215**System capability**: SystemCapability.ArkUI.ArkUI.Full 216 217**Parameters** 218 219| Name| Type | Mandatory| Description | 220| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 221| style | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10)> | Yes | Font color, font size, and font weight of the selected item.<br>If **style** is set to **undefined**, the default value is used:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} | 222 223### loop<sup>11+</sup> 224 225loop(value: boolean) 226 227Sets whether to enable the loop mode. 228 229**Atomic service API**: This API can be used in atomic services since API version 12. 230 231**System capability**: SystemCapability.ArkUI.ArkUI.Full 232 233**Parameters** 234 235| Name| Type | Mandatory| Description | 236| ------ | ------- | ---- | ------------------------------------------------------------ | 237| value | boolean | Yes | Whether to enable the loop mode.<br>Default value: **true**<br>The value **true** means to enable loop mode, and **false** means the opposite.| 238 239### loop<sup>18+</sup> 240 241loop(isLoop: Optional\<boolean>) 242 243Sets whether to enable the loop mode. Compared to [loop](#loop11)<sup>11+</sup>, this API supports the **undefined** type for the **isLoop** parameter. 244 245**Atomic service API**: This API can be used in atomic services since API version 18. 246 247**System capability**: SystemCapability.ArkUI.ArkUI.Full 248 249**Parameters** 250 251| Name| Type | Mandatory| Description | 252| ------ | ------- | ---- | ------------------------------------------------------------ | 253| isLoop | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | Yes | Whether to enable the loop mode.<br>If **isLoop** is set to **undefined**, the default value **true** is used. The value **true** means to enable the loop mode, and false means the opposite.| 254 255### dateTimeOptions<sup>12+</sup> 256 257dateTimeOptions(value: DateTimeOptions) 258 259Sets whether to display a leading zero for the hours, minutes, and seconds. 260 261**Atomic service API**: This API can be used in atomic services since API version 12. 262 263**System capability**: SystemCapability.ArkUI.ArkUI.Full 264 265**Parameters** 266 267| Name| Type | Mandatory| Description | 268| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 269| value | [DateTimeOptions](../../apis-localization-kit/js-apis-intl.md#datetimeoptions) | Yes | Whether to display a leading zero for the hours, minutes, and seconds. Currently only the configuration of the **hour**, **minute**, and **second** parameters is supported.<br>Default value:<br>**hour**: In the 24-hour format, it defaults to **2-digit**, which means a leading zero is used; In the 12-hour format, it defaults to **numeric**, which means no leading zero is used.<br>**minute**: defaults to **2-digit**, which means a leading zero is used.<br>**second**: defaults to **2-digit**, which means a leading zero is used.<br>| 270 271### dateTimeOptions<sup>18+</sup> 272 273dateTimeOptions(timeFormat: Optional\<DateTimeOptions>) 274 275Sets whether to display a leading zero for the hours, minutes, and seconds. Compared to [dateTimeOptions](#datetimeoptions12)<sup>12+</sup>, this API supports the **undefined** type for the **timeFormat** parameter. 276 277**Atomic service API**: This API can be used in atomic services since API version 18. 278 279**System capability**: SystemCapability.ArkUI.ArkUI.Full 280 281**Parameters** 282 283| Name| Type | Mandatory| Description | 284| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 285| timeFormat | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[DateTimeOptions](../../apis-localization-kit/js-apis-intl.md#datetimeoptions)> | Yes | Whether to display a leading zero for the hours, minutes, and seconds. Currently only the configuration of the **hour**, **minute**, and **second** parameters is supported.<br>Default value:<br>**hour**: In the 24-hour format, it defaults to **2-digit**, which means a leading zero is used; In the 12-hour format, it defaults to **numeric**, which means no leading zero is used.<br>**minute**: defaults to **2-digit**, which means a leading zero is used.<br>**second**: defaults to **2-digit**, which means a leading zero is used.<br>| 286 287### enableHapticFeedback<sup>12+</sup> 288 289enableHapticFeedback(enable: boolean) 290 291Sets whether to enable haptic feedback. 292 293**Atomic service API**: This API can be used in atomic services since API version 12. 294 295**System capability**: SystemCapability.ArkUI.ArkUI.Full 296 297| Name| Type | Mandatory | Description | 298| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 299| enable | boolean | Yes | Whether haptic feedback is enabled.<br>**true** (default): Haptic feedback is enabled.<br>**false**: Haptic feedback is disabled.<br>Whether this parameter takes effect after being set to true depends on hardware support.| 300 301### enableHapticFeedback<sup>18+</sup> 302 303enableHapticFeedback(enable: Optional\<boolean>) 304 305Sets whether to enable haptic feedback. Compared to [enableHapticFeedback](#enablehapticfeedback12)<sup>12+</sup>, this API supports the **undefined** type for the **enable** parameter. 306 307**Atomic service API**: This API can be used in atomic services since API version 18. 308 309**System capability**: SystemCapability.ArkUI.ArkUI.Full 310 311| Name| Type | Mandatory | Description | 312| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 313| enable | [Optional](ts-universal-attributes-custom-property.md#optional12)\<boolean> | Yes | Whether haptic feedback is enabled.<br>If **enable** is set to **undefined**, the default value **true** is used. The value **true** means to enable haptic feedback, and **false** means the opposite.<br>Whether this parameter takes effect after being set to true depends on hardware support.| 314 315> **NOTE** 316> 317> To enable haptic feedback, you must declare the ohos.permission.VIBRATE permission under **requestPermissions** in the **module.json5** file of the project. 318> ```json 319> "requestPermissions": [ 320> { 321> "name": "ohos.permission.VIBRATE", 322> } 323> ] 324> ``` 325 326### enableCascade<sup>18+</sup> 327 328enableCascade(enable: boolean) 329 330Sets whether the AM/PM indicator automatically switches based on the hour in 12-hour format. 331 332**Atomic service API**: This API can be used in atomic services since API version 18. 333 334**System capability**: SystemCapability.ArkUI.ArkUI.Full 335 336| Name| Type | Mandatory | Description | 337| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 338| enable | boolean | Yes | Whether the AM/PM indicator automatically switches based on the hour in 12-hour format.<br>Default value: **false**. The value **true** means that the AM/PM indicator automatically switches based on the hour in 12-hour format, and **false** means the opposite.<br>Setting this parameter to **true** takes effect only when **loop** is also set to **true**.<br>| 339 340### digitalCrownSensitivity<sup>18+</sup> 341digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 342 343Sets the sensitivity to the digital crown rotation. 344 345**Atomic service API**: This API can be used in atomic services since API version 18. 346 347**System capability**: SystemCapability.ArkUI.ArkUI.Full 348 349| Name | Type | Mandatory | Description | 350| ----- | ---------------------------------------- | ---- | ------------------------- | 351| sensitivity | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[CrownSensitivity](ts-appendix-enums.md#crownsensitivity18)> | Yes | Sensitivity to the digital crown rotation. | 352 353> **NOTE** 354> 355> This API is only available to circular screens on wearable devices. 356 357## Events 358 359In addition to the [universal events](ts-component-general-events.md), the following events are supported. 360 361### onChange 362 363onChange(callback: (value: TimePickerResult ) => void) 364 365Triggered when a time is selected. 366 367**Atomic service API**: This API can be used in atomic services since API version 11. 368 369**System capability**: SystemCapability.ArkUI.ArkUI.Full 370 371**Parameters** 372 373| Name| Type | Mandatory| Description | 374| ------ | --------------------------------------------- | ---- | -------------- | 375| value | [TimePickerResult](#timepickerresult)| Yes | Time in 24-hour format.| 376 377### onChange<sup>18+</sup> 378 379onChange(callback: Optional\<OnTimePickerChangeCallback>) 380 381Triggered when the time options in the TimePicker rest on the selected position after scrolling. Compared to [onChange](#onchange), this API supports the **undefined** type for the **callback** parameter. 382 383**Atomic service API**: This API can be used in atomic services since API version 18. 384 385**System capability**: SystemCapability.ArkUI.ArkUI.Full 386 387**Parameters** 388 389| Name | Type | Mandatory| Description | 390| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 391| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[OnTimePickerChangeCallback](#ontimepickerchangecallback18)> | Yes | Callback invoked when a time option is selected.<br>If **callback** is set to **undefined**, the callback function is not used.| 392 393### onEnterSelectedArea<sup>18+</sup> 394 395onEnterSelectedArea(callback: Callback\<TimePickerResult>) 396 397Triggered during the scrolling of the time picker when an item enters the divider area. 398 399Compared to the **onChange** event, this event is triggered earlier, specifically when the scroll distance of the current column exceeds half the height of the selected item, which indicates that the item has entered the divider area. When **enableCascade** is set to **true**, using this callback is not recommended due to the interdependent relationship between the AM/PM and hour columns. This callback indicates the moment an option enters the divider area during scrolling, and only the value of the currently scrolled column will change. The values of other non-scrolled columns will remain unchanged. 400 401**Atomic service API**: This API can be used in atomic services since API version 18. 402 403**System capability**: SystemCapability.ArkUI.ArkUI.Full 404 405**Parameters** 406 407| Name | Type | Mandatory| Description | 408| -------- | -------------------------- | ---- | ------------------------------------------ | 409| callback | Callback\<[TimePickerResult](#timepickerresult)> | Yes | Callback triggered during the scrolling of the time picker when an item enters the divider area.| 410 411## OnTimePickerChangeCallback<sup>18+</sup> 412 413type OnTimePickerChangeCallback = (value: TimePickerResult) => void 414 415Triggered when a time is selected. 416 417**Widget capability**: This API can be used in ArkTS widgets since API version 18. 418 419**Atomic service API**: This API can be used in atomic services since API version 18. 420 421**System capability**: SystemCapability.ArkUI.ArkUI.Full 422 423**Parameters** 424 425| Name| Type | Mandatory| Description | 426| ------ | --------------------------------------------- | ---- | -------------- | 427| value | [TimePickerResult](#timepickerresult)| Yes | Time in 24-hour format.| 428 429## TimePickerResult 430 431Describes a time in 24-hour format. 432 433**Atomic service API**: This API can be used in atomic services since API version 11. 434 435**System capability**: SystemCapability.ArkUI.ArkUI.Full 436 437| Name | Type | Read Only| Optional| Description | 438| -------------------- | ------ | ---- | ---- | ----------------------------------- | 439| hour | number | No | No | Hour portion of the selected time.<br>Value range: [0-23]| 440| minute | number | No | No | Minute portion of the selected time.<br>Value range: [0-59]| 441| second<sup>11+</sup> | number | No | No | Second portion of the selected time.<br>Value range: [0-59]| 442 443## Example 444 445### Example 1: Setting the Text Style 446 447This example demonstrates how to configure **disappearTextStyle**, **textStyle**, and **selectedTextStyle** to customize the text style in a text picker. 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### Example 2: Switching Between 12-Hour and 24-Hour Formats 476 477This example demonstrates how to switch between 12-hour and 24-hour formats using **useMilitaryTime**. 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('Switch Time Format') 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### Example 3: Setting the Time Format 516 517This example shows how to set the time format using **format** and **dateTimeOptions**. 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### Example 4: Setting Loopable Scrolling 547 548This example demonstrates how to set whether scrolling is loopable using **loop**. 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('Loopable scrolling').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### Example 5: Setting the Start Time 588 589This example demonstrates how to set the start time for the time picker. 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### Example 6: Setting the End Time 619 620This example demonstrates how to set the end time for the time picker. 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### Example 7: Enabling the AM/PM Indicator to Automatically Switch Based on the Hour in 12-hour Format 651 652This example demonstrates how to enable AM/PM indicator to automatically switch based on the hour in 12-hour format using **enableCascade** and **loop**. 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
