IBest-UI@HarmonyOS

Appearance

TimePicker 时间选择 ​

介绍 ​

日期选择器，用于选择年、月、日，通常与弹出层组件配合使用。

引入 ​

ts
import { IBestTimePicker, IBestPickerOption } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["10", "18", "18"]
  
  build() {
    Column(){
      IBestTimePicker({
        title: "选择时间",
        value: $selectValue,
        onConfirm: (value: string[]) => {
          IBestToast.show(value.join(":"))
        },
        onChange: (value: string[]) => {
          IBestToast.show(value.join(":"))
        }
      })
    }
  }
}

选项类型 ​

选项类型

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["10", "18"]
  
  build() {
    Column(){
      IBestTimePicker({
        title: "选择时分",
        listType: ["hour", "minute"],
        value: $selectValue,
        onConfirm: (value: string[]) => {
          IBestToast.show(value.join(":"))
        },
        onChange: (value: string[]) => {
          IBestToast.show(value.join(":"))
        }
      })
    }
  }
}

时间范围 ​

时间范围

TIP

通过 minTime maxTime 属性可控制时间范围, 格式参考 00:00:00。
• 默认最小时间 00:00:00；
• 默认最大时间 23:59:59。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = []
  
  build() {
    Column(){
      IBestTimePicker({
        title: "选择时间",
        minTime: "08:30:00",
        maxTime: "18:00:00",
        value: $selectValue,
        onConfirm: (value: string[]) => {
          IBestToast.show(value.join(":"))
        },
        onChange: (value: string[]) => {
          IBestToast.show(value.join(":"))
        }
      })
    }
  }
}

显示单位 ​

显示单位

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["10", "18", "18"]
  
  build() {
    @State selectValue: string[] = []
    
    build() {
      Column(){
        IBestTimePicker({
          title: "选择时间",
          showUnit: true,
          value: $selectValue,
          onConfirm: (value: string[]) => {
            IBestToast.show(value.join(":"))
          },
          onChange: (value: string[]) => {
            IBestToast.show(value.join(":"))
          }
        })
      }
    }
  }
}

过滤选项 ​

过滤选项

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["2024", "08"]
  filter(type: string, options: IBestPickerOption[]): IBestPickerOption[]{
    if (type === 'hour') {
        return options.filter((option) => Number(option.value) % 6 === 0)
    }
    return options
  }
  build() {
    Column(){
      IBestTimePicker({
        title: "选择日期",
        filter: this.filter,
        value: $selectValue,
        onConfirm: (value: string[]) => {
          IBestToast.show(value.join(":"))
        },
        onChange: (value: string[]) => {
          IBestToast.show(value.join(":"))
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前选中的日期, 支持双向绑定string[][]
minTime最小可选时间string00:00:00
maxTime最大可选时间string23:59:59
listType列表类型('hour' | 'minute' | 'second')[]["hour", "minute", "second"]
showUnit是否显示单位booleanfalse
title标题string''
itemHeight单项高度number | string44
visibleItemCount可见选项数量number6
showToolBar是否显示顶部栏booleantrue
confirmText确认按钮文字string确定
cancelText取消按钮文字string取消
filter过滤器(type: string, options: IBestPickerOption[]) => IBestPickerOption[]null
groupId分组id, 通常在配合PickerGroup组件使用时传入string''
horizontal 2.0.0是否横向booleanfalse
itemWidth 2.0.0单项宽度number | string44
contentHeight 2.0.0整体高度, 仅横向时生效number | string44
optionFontSize 2.0.0选项字体大小number | string16

Events ​

事件名说明回调参数
onChange某一列选项变更后触发value: string[]
onConfirm点击确定按钮时触发value: string[]
onCancel点击取消按钮时触发-