codecamp

时间选择组件

时间选择组件,根据指定参数创建选择器,支持选择小时及分钟。

说明

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

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

默认以24小时的时间区间创建滑动选择器。

参数:

参数名

参数类型

必填

参数描述

selected

Date

设置选中项的时间。

默认值:当前系统时间

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

useMilitaryTime

boolean

展示时间是否为24小时制,不支持动态修改。

默认值:false

事件

除支持通用事件外,还支持以下事件:

名称

功能描述

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

选择时间时触发该事件。

TimePickerResult对象说明

返回值为24小时制时间。

名称

参数类型

描述

hour

number

选中时间的时。

取值范围:[0-23]

minute

number

选中时间的分。

取值范围:[0-59]

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TimePickerExample {
  5. @State isMilitaryTime: boolean = false
  6. private selectedTime: Date = new Date('2022-07-22T08:00:00')
  7. build() {
  8. Column() {
  9. Button('切换12小时制/24小时制')
  10. .margin({ top: 30, bottom: 30 })
  11. .onClick(() => {
  12. this.isMilitaryTime = !this.isMilitaryTime
  13. })
  14. TimePicker({
  15. selected: this.selectedTime,
  16. })
  17. .useMilitaryTime(this.isMilitaryTime)
  18. .onChange((value: TimePickerResult) => {
  19. this.selectedTime.setHours(value.hour, value.minute)
  20. console.info('select current date is: ' + JSON.stringify(value))
  21. })
  22. }.width('100%')
  23. }
  24. }

计时器状态的组件
勾选框样式、状态按钮样式及开关样式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }