时间选择

效果

子组件

无

参数

• selected

选中的日期

属性

useMilitaryTime

设置展示时间是否为 24 小时制。如果展示时间为 12 小时制，上下午与小时无联动

disappearTextStyle

第一个和最后一个的样式

textStyle

普通文本样式

selectedTextStyle

选中的样式

loop

是否循环

dateTimeOptions

• 时间格式

{
  hour:'2-digit',
  minute:'2-digit',
  second:'2-digit'
}

事件

• onChange

日期改变后触发

示例

// xxx.ets
@Entry
@Component
struct Index8 {
  // 24小时和12小时切换
  @State isMilitaryTime: boolean = false;
  // 默认时间
  private selectedTime: Date = new Date();


  build() {
    Column() {
      Button('切换12小时制/24小时制')
        .margin(30)
        .onClick(() => {
          this.isMilitaryTime = !this.isMilitaryTime;
        })
      TimePicker({
        selected: this.selectedTime,
      })
      // 区分24小时制和12小时制
        .useMilitaryTime(this.isMilitaryTime)
      // 日期改变
        .onChange((value: TimePickerResult) => {
          if(value.hour >= 0) {
            this.selectedTime.setHours(value.hour, value.minute);
            console.info('select current date is: ' + JSON.stringify(value));
          }
        })
        // 设定时间是几位的
        .dateTimeOptions({
          hour:'2-digit',
          minute:'2-digit',
          second:'2-digit'
        })
        .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}})
        .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}})
        .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}})
    }.width('100%')
  }
}