TimePicker

TimePicker is a component that allows users to select a time from the given range through scrolling.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

Avoid changing component attributes during animation processes.

The maximum number of rows that can be displayed varies by screen orientation: In portrait mode, the default number of rows is 5. In landscape mode, the number of rows depends on the system configuration. If no system configuration is set, the default is 3 rows. To check the specific system configuration value for landscape mode, use $r('sys.float.ohos_id_picker_show_count_landscape').

Child Components

Not supported

APIs

TimePicker(options?: TimePickerOptions)

Creates a time picker, which uses the 24-hour time format by default.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	TimePickerOptions	No	Parameters of the time picker.

TimePickerOptions

Describes the parameters of the time picker.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read Only	Optional	Description
selected	Date	No	Yes	Time of the selected item. Default value: current system time Since API version 10, this parameter supports two-way binding through $$. Atomic service API: This API can be used in atomic services since API version 11.
format¹¹⁺	TimePickerFormat	No	Yes	Time format. Default value: TimePickerFormat.HOUR_MINUTE Atomic service API: This API can be used in atomic services since API version 12.
start¹⁸⁺	Date	No	Yes	Start time of the time picker. Default value: Date(0, 0, 0, 0, 0, 0) NOTE 1. Only the hour and minute values take effect. 2. If start is set and is not the default value, loop does not take effect. Atomic service API: This API can be used in atomic services since API version 18.
end¹⁸⁺	Date	No	Yes	End time of the time picker. Default value: Date(0, 0, 0, 23, 59, 59). NOTE 1. Only the hour and minute values take effect. 2. If end is set and is not the default value, loop does not take effect. Atomic service API: This API can be used in atomic services since API version 18.

Property modifications made to TimePickerOptions during the TimePicker scrolling process may not take effect.

The Date object is used to handle dates and time. It can be used in the following ways:

Method 1: new Date()

Obtains the current system date and time.

Method 2: new Date(value: number | string)

Name	Type	Mandatory	Description
value	number \| string	Yes	Date format. number: number of milliseconds since 00:00:00 on January 1, 1970. string: date string in formats such as 2025-02-20 08:00:00 or 2025-02-20T08:00:00.

Method 3: new Date(year: number, monthIndex: number, date?: number, hours?: number, minutes?: number, seconds?: number, ms?: number)

Name	Type	Mandatory	Description
year	number	Yes	Year, for example, 2025.
monthIndex	number	Yes	Month index, for example, 2 for March.
date	number	No	Date, for example, 10 (if hours is set, date cannot be omitted).
hours	number	No	Hour, for example, 15 (if minutes is set, hours cannot be omitted).
minutes	number	No	Minute, for example, 20 (if seconds is set, minutes cannot be omitted).
seconds	number	No	Second, for example, 20 (if ms is set, seconds cannot be omitted).
ms	number	No	Millisecond, for example, 10.

Handling in the case of date configuration exceptions

Exception	Result
The start time is later than the end time.	Both start time and end time are set to their default values.
The selected time is earlier than the start time.	The selected time is set to the start time.
The selected time is later than the end time.	The selected time is set to the end time.
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.
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.
The time format is invalid, such as '01:61:61'.	The default value is used.

TimePickerFormat¹¹⁺

Enumerates time display formats of the time picker.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
HOUR_MINUTE	0	Time format displaying hours and minutes.
HOUR_MINUTE_SECOND	1	Time format displaying hours, minutes, and seconds.

Attributes

In addition to the universal attributes, the following attributes are supported.

useMilitaryTime

useMilitaryTime(value: boolean)

Sets whether the time is displayed in 24-hour format. If this attribute is not specified, the system time format is used by default.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to display the time in 24-hour format or 12-hour format. - true: 24-hour format. - false: 12-hour format.

useMilitaryTime¹⁸⁺

useMilitaryTime(isMilitaryTime: Optional<boolean>)

Sets whether the time is displayed in 24-hour format. If this attribute is not specified, the system time format is used by default. Compared with useMilitaryTime, this API supports the undefined type for the isMilitaryTime parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
isMilitaryTime	Optional<boolean>	Yes	Whether to display the time in 24-hour format or 12-hour format. - true: 24-hour format. - false: 12-hour format. When the value is undefined, the system time format is used by default.

disappearTextStyle¹⁰⁺

disappearTextStyle(value: PickerTextStyle)

Sets the text color, font size, and font weight of edge items (the second item above or below the selected item).

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	PickerTextStyle	Yes	Text color, font size, and font weight for edge items. Default value: { color: '#ff182431', font: { size: '14fp', weight: FontWeight.Regular } }

NOTE

Edge items only appear when there are at least two visible items above or below the selected item. If insufficient items are available, no edge items will be styled.

disappearTextStyle¹⁸⁺

disappearTextStyle(style: Optional<PickerTextStyle>)

Sets the text color, font size, and font weight of edge items (the second item above or below the selected item). Compared with disappearTextStyle¹⁰⁺, this API supports the undefined type for the style parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
style	Optional<PickerTextStyle>	Yes	Text color, font size, and font weight for edge items. Default value: { color: '#ff182431', font: { size: '14fp', weight: FontWeight.Regular } } If the value of style is undefined, the default value is used.

NOTE

Edge items only appear when there are at least two visible items above or below the selected item. If insufficient items are available, no edge items will be styled.

textStyle¹⁰⁺

textStyle(value: PickerTextStyle)

Sets the text color, font size, and font weight of candidate items (the item immediately adjacent to the selected item, above or below).

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	PickerTextStyle	Yes	Text color, font size, and font weight for candidate items. Default value: { color: '#ff182431', font: { size: '16fp', weight: FontWeight.Regular } }

NOTE

Candidate items only appear when there is at least one visible item above or below the selected item. If insufficient items are available, no candidate items will be styled.

textStyle¹⁸⁺

textStyle(style: Optional<PickerTextStyle>)

Sets the text color, font size, and font weight of candidate items (the item immediately adjacent to the selected item, above or below). Compared with textStyle¹⁰⁺, this API supports the undefined type for the style parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
style	Optional<PickerTextStyle>	Yes	Text color, font size, and font weight for candidate items. Default value: { color: '#ff182431', font: { size: '16fp', weight: FontWeight.Regular } } If the value of style is undefined, the default value is used.

NOTE

Candidate items only appear when there is at least one visible item above or below the selected item. If insufficient items are available, no candidate items will be styled.

selectedTextStyle¹⁰⁺

selectedTextStyle(value: PickerTextStyle)

Sets the text color, font size, and font weight of the selected item.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Device behavior: This API has no effect on wearables and works on other devices.

Parameters

Name	Type	Mandatory	Description
value	PickerTextStyle	Yes	Font color, font size, and font weight of the selected item. Default value: { color: '#ff007dff', font: { size: '20fp', weight: FontWeight.Medium } }

selectedTextStyle¹⁸⁺

selectedTextStyle(style: Optional<PickerTextStyle>)

Sets the text color, font size, and font weight of the selected item. Compared with selectedTextStyle¹⁰⁺, this API supports the undefined type for the style parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Device behavior: This API has no effect on wearables and works on other devices.

Parameters

Name	Type	Mandatory	Description
style	Optional<PickerTextStyle>	Yes	Font color, font size, and font weight of the selected item. Default value: { color: '#ff007dff', font: { size: '20fp', weight: FontWeight.Medium } } If the value of style is undefined, the default value is used.

loop¹¹⁺

loop(value: boolean)

Sets whether to enable loop scrolling.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to enable loop scrolling. - true: Enable loop scrolling. - false: Disable loop scrolling. Default value: true.

loop¹⁸⁺

loop(isLoop: Optional<boolean>)

Sets whether to enable loop scrolling. Compared with loop¹¹⁺, this API supports the undefined type for the isLoop parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
isLoop	Optional<boolean>	Yes	Whether to enable loop scrolling. - true: Enable loop scrolling. - false: Disable loop scrolling. Default value: true. If the value of isLoop is undefined, the default value is used.

dateTimeOptions¹²⁺

dateTimeOptions(value: DateTimeOptions)

Sets whether to display a leading zero for the hours, minutes, and seconds.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	DateTimeOptions	Yes	Whether to display a leading zero for the hours, minutes, and seconds. Default value: hour: For the 24-hour format, the default value is "2-digit", meaning the hour is displayed as a two-digit number. If the actual value is less than 10, a leading zero is added, displayed as "0X". For the 12-hour format, the default value is "numeric", meaning no leading zero. minute: The default value is "2-digit", meaning the minute is displayed as a two-digit number. If the actual value is less than 10, a leading zero is added, displayed as "0X". second: The default value is "2-digit", meaning the minute is displayed as a two-digit number. If the actual value is less than 10, a leading zero is added, displayed as "0X". If hour, minute, or second is set to undefined, the display follows the default rules.

dateTimeOptions¹⁸⁺

dateTimeOptions(timeFormat: Optional<DateTimeOptions>)

Sets whether to display a leading zero for the hours, minutes, and seconds. Compared with dateTimeOptions¹²⁺, this API supports the undefined type for the timeFormat parameter.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
timeFormat	Optional<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. Default value: hour: For the 24-hour format, the default value is "2-digit", meaning the hour is displayed as a two-digit number. If the actual value is less than 10, a leading zero is added, displayed as "0X". For the 12-hour format, the default value is "numeric", meaning no leading zero. minute: The default value is "2-digit", meaning the minute is displayed as a two-digit number. If the actual value is less than 10, a leading zero is added, displayed as "0X". second: The default value is "2-digit", meaning the minute is displayed as a two-digit number. If the actual value is less than 10, a leading zero is added, displayed as "0X". If hour, minute, or second is set to undefined, the display follows the default rules.

enableHapticFeedback¹²⁺

enableHapticFeedback(enable: boolean)

Sets whether to enable haptic feedback.

To enable haptic feedback, you must declare the following permission under requestPermissions in module in src/main/module.json5 of the project.

"requestPermissions": [
   {
      "name": "ohos.permission.VIBRATE",
   }
]

NOTE

This API can be called within attributeModifier since API version 18.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enable	boolean	Yes	Whether to enable haptic feedback. - true: Enable haptic feedback. - false: Disable haptic feedback. Default value: true. Whether this parameter takes effect after being set to true depends on hardware support.

enableHapticFeedback¹⁸⁺

enableHapticFeedback(enable: Optional<boolean>)

Sets whether to enable haptic feedback. Compared with enableHapticFeedback¹²⁺, this API supports the undefined type for the enable parameter.

To enable haptic feedback, you must declare the following permission under requestPermissions in module in src/main/module.json5 of the project.

"requestPermissions": [
  {
    "name": "ohos.permission.VIBRATE",
  }
]

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enable	Optional<boolean>	Yes	Whether to enable haptic feedback. - true: Enable haptic feedback. - false: Disable haptic feedback. Default value: true. If the value of enable is undefined, the default value is used. Whether this parameter takes effect after being set to true depends on hardware support.

enableCascade¹⁸⁺

enableCascade(enabled: boolean)

Sets whether the AM/PM indicator automatically switches based on the hour value. Only takes effect when useMilitaryTime is set to false.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
enabled	boolean	Yes	Sets whether the AM/PM indicator automatically switches based on the hour value. This setting only takes effect when useMilitaryTime is set to false. - true: The AM/PM indicator automatically switches based on the hour value. - false: The AM/PM indicator remains static regardless of hour changes. Default value: false. When enabled is set to true, it only takes effect if the loop parameter is also true.

digitalCrownSensitivity¹⁸⁺

digitalCrownSensitivity(sensitivity: Optional<CrownSensitivity>)

Sets the sensitivity to the digital crown rotation.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
sensitivity	Optional<CrownSensitivity>	Yes	Sensitivity to the digital crown rotation. Default value: CrownSensitivity.MEDIUM

NOTE

This API is used for circular screens on wearables. The component needs to obtain focus before responding to the crown event.

Events

In addition to the universal events, the following events are supported.

onChange

onChange(callback: (value: TimePickerResult ) => void)

Triggered when the time picker snaps to the selected item. This event cannot be triggered by two-way bound state variables.

This callback is triggered only after the scroll animation completes. To obtain real-time index changes, use onEnterSelectedArea instead.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	TimePickerResult	Yes	Time in 24-hour format.

onChange¹⁸⁺

onChange(callback: Optional<OnTimePickerChangeCallback>)

Triggered when the time picker snaps to the selected item. This event cannot be triggered by two-way bound state variables. Compared with onChange, this API supports the undefined type for the callback parameter.

This callback is triggered only after the scroll animation completes. To obtain real-time index changes, use onEnterSelectedArea instead.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Optional<OnTimePickerChangeCallback>	Yes	Callback invoked when a time option is selected. If callback is set to undefined, the callback function is not used.

onEnterSelectedArea¹⁸⁺

onEnterSelectedArea(callback: Callback<TimePickerResult>)

Triggered during the scrolling of the time picker when an item enters the divider area.

Compared with 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.

NOTE

This API cannot be called within attributeModifier.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
callback	Callback<TimePickerResult>	Yes	Callback triggered during the scrolling of the time picker when an item enters the divider area.

DateTimeOptions¹²⁺

type DateTimeOptions = DateTimeOptions

Defines the options for a DateTimeOptions object.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Type	Description
DateTimeOptions	Options for creating the DateTimeOptions object.

OnTimePickerChangeCallback¹⁸⁺

type OnTimePickerChangeCallback = (result: TimePickerResult) => void

Triggered when a time is selected.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
result	TimePickerResult	Yes	Time in 24-hour format.

TimePickerResult

Describes a time in 24-hour format.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Read Only	Optional	Description
hour	number	No	No	Hour portion of the selected time. Value range: [0-23]
minute	number	No	No	Minute portion of the selected time. Value range: [0-59]
second¹¹⁺	number	No	No	Second portion of the selected time. Value range: [0-59]

Example

Example 1: Setting the Text Style

This example demonstrates how to customize the text style in a time picker using disappearTextStyle, textStyle, and selectedTextStyle.

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  private selectedTime: Date = new Date('2022-07-22T08:00:00');

  build() {
    TimePicker({
      selected: this.selectedTime
    })
      .disappearTextStyle({ color: '#004aaf', font: { size: 24, weight: FontWeight.Lighter } })
      .textStyle({ color: Color.Black, font: { size: 26, weight: FontWeight.Normal } })
      .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })
      .onChange((value: TimePickerResult) => {
        if (value.hour >= 0) {
          this.selectedTime.setHours(value.hour, value.minute);
          console.info('select current date is: ' + JSON.stringify(value));
        }
      })
  }
}

timePicker

Example 2: Switching Between 12-Hour and 24-Hour Formats

This example demonstrates how to switch between 12-hour and 24-hour formats using useMilitaryTime.

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  @State isMilitaryTime: boolean = false;
  private selectedTime: Date = new Date('2022-07-22T08:00:00');

  build() {
    Column() {
      Button('Switch Time Format')
        .margin(30)
        .onClick(() => {
          this.isMilitaryTime = !this.isMilitaryTime;
        })

      TimePicker({
        selected: this.selectedTime
      })
        .useMilitaryTime(this.isMilitaryTime)
        .onChange((value: TimePickerResult) => {
          if (value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute);
            console.info('select current time is: ' + JSON.stringify(value));
          }
        })
        .onEnterSelectedArea((value: TimePickerResult) => {
            console.info('item enter selected area, time is: ' + JSON.stringify(value));
        })
    }.width('100%')
  }
}

timePicker

Example 3: Setting the Time Format

This example shows how to set the time format using format and dateTimeOptions.

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  private selectedTime: Date = new Date('2022-07-22T08:00:00');

  build() {
    Column() {
      TimePicker({
        selected: this.selectedTime,
        format: TimePickerFormat.HOUR_MINUTE_SECOND
      })
        .dateTimeOptions({ hour: "numeric", minute: "2-digit", second: "2-digit" })
        .onChange((value: TimePickerResult) => {
          if (value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute);
            console.info('select current date is: ' + JSON.stringify(value));
          }
        })
    }.width('100%')
  }
}

timePicker

Example 4: Setting Loop Scrolling

This example demonstrates how to set whether to enable loop scrolling using loop.

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  @State isLoop: boolean = true;
  @State selectedTime: Date = new Date('2022-07-22T12:00:00');

  build() {
    Column() {
      TimePicker({
        selected: this.selectedTime
      })
        .loop(this.isLoop)
        .onChange((value: TimePickerResult) => {
          if (value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute);
            console.info('select current date is: ' + JSON.stringify(value));
          }
        })

      Row() {
        Text('Loopable scrolling').fontSize(20)

        Toggle({ type: ToggleType.Switch, isOn: true })
          .onChange((isOn: boolean) => {
            this.isLoop = isOn;
          })
      }.position({ x: '60%', y: '40%' })

    }.width('100%')
  }
}

timePicker

Example 5: Setting the Start Time

This example demonstrates how to set the start time for the time picker.

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  private selectedTime: Date = new Date('2022-07-22T08:50:00');

  build() {
    Column() {
      TimePicker({
        selected: this.selectedTime,
        format: TimePickerFormat.HOUR_MINUTE_SECOND,
        start: new Date('2022-07-22T08:30:00')
      })
        .dateTimeOptions({ hour: "numeric", minute: "2-digit", second: "2-digit" })
        .onChange((value: TimePickerResult) => {
          if (value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute);
            console.info('select current date is: ' + JSON.stringify(value));
          }
        })
    }.width('100%')
  }
}

timePicker

Example 6: Setting the End Time

This example demonstrates how to set the end time for the time picker.

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  private selectedTime: Date = new Date('2022-07-22T08:50:00');

  build() {
    Column() {
      TimePicker({
        selected: this.selectedTime,
        format: TimePickerFormat.HOUR_MINUTE_SECOND,
        end: new Date('2022-07-22T15:20:00'),
      })
        .dateTimeOptions({ hour: "numeric", minute: "2-digit", second: "2-digit" })
        .onChange((value: TimePickerResult) => {
          if (value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute);
            console.info('select current date is: ' + JSON.stringify(value));
          }
        })
    }.width('100%')
  }
}

timePicker

Example 7: Enabling the AM/PM Indicator to Automatically Switch Based on the Hour Value in 12-hour Format

This example demonstrates how to enable the AM/PM indicator to automatically switch based on the hour value in 12-hour format using enableCascade and loop.

The enableCascade API is added since API version 18.

// xxx.ets
@Entry
@Component
struct TimePickerExample {
  private selectedTime: Date = new Date('2022-07-22T08:00:00');

  build() {
    Column() {
      TimePicker({
        selected: this.selectedTime,
      })
        .enableCascade(true)
        .loop(true)
        .onChange((value: TimePickerResult) => {
          if (value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute);
            console.info('select current date is: ' + JSON.stringify(value));
          }
        })
    }.width('100%')
  }
}

timePicker

TimePicker

Child Components

APIs

TimePickerOptions

TimePickerFormat11+

Attributes

useMilitaryTime

useMilitaryTime18+

disappearTextStyle10+

disappearTextStyle18+

textStyle10+

textStyle18+

selectedTextStyle10+

selectedTextStyle18+

loop11+

loop18+

dateTimeOptions12+

dateTimeOptions18+

enableHapticFeedback12+

enableHapticFeedback18+

enableCascade18+

digitalCrownSensitivity18+

Events

onChange

onChange18+

onEnterSelectedArea18+

DateTimeOptions12+

OnTimePickerChangeCallback18+

TimePickerResult

Example

Example 1: Setting the Text Style

Example 2: Switching Between 12-Hour and 24-Hour Formats

Example 3: Setting the Time Format

Example 4: Setting Loop Scrolling

Example 5: Setting the Start Time

Example 6: Setting the End Time

Example 7: Enabling the AM/PM Indicator to Automatically Switch Based on the Hour Value in 12-hour Format

TimePickerFormat¹¹⁺

useMilitaryTime¹⁸⁺

disappearTextStyle¹⁰⁺

disappearTextStyle¹⁸⁺

textStyle¹⁰⁺

textStyle¹⁸⁺

selectedTextStyle¹⁰⁺

selectedTextStyle¹⁸⁺

loop¹¹⁺

loop¹⁸⁺

dateTimeOptions¹²⁺

dateTimeOptions¹⁸⁺

enableHapticFeedback¹²⁺

enableHapticFeedback¹⁸⁺

enableCascade¹⁸⁺

digitalCrownSensitivity¹⁸⁺

onChange¹⁸⁺

onEnterSelectedArea¹⁸⁺

DateTimeOptions¹²⁺

OnTimePickerChangeCallback¹⁸⁺