TimePicker

The <TimePicker> component allows users to select a time (with the hour and minute) from the given range.

NOTE

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

Child Components

Not supported

APIs

TimePicker(options?: {selected?: Date})

Creates a time picker, which is in 24-hour format by default.

Parameters

Name	Type	Mandatory	Description
selected	Date	No	Time of the selected item. Default value: current system time

Attributes

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

Name	Type	Description
useMilitaryTime	boolean	Whether to display time in 24-hour format. The value cannot be modified dynamically. Default value: false

Events

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

Name	Description
onChange(callback: (value: TimePickerResult ) => void)	Triggered when a time is selected.

TimePickerResult

Name	Type	Description
hour	number	Hour portion of the selected time.
minute	number	Minute portion of the selected time.

Example

// 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({ top: 30 })
        .onClick(() => {
          this.isMilitaryTime = !this.isMilitaryTime
        })
      TimePicker({
        selected: this.selectedTime,
      })
        .useMilitaryTime(this.isMilitaryTime)
        .onChange((value: TimePickerResult) => {
          this.selectedTime.setHours(value.hour, value.minute)
          console.info('select current date is: ' + JSON.stringify(value))
        })
    }.width('100%')
  }
}

timePicker