IBest-UI@HarmonyOS

Appearance

DatePicker 日期选择 ​

介绍 ​

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

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

TIP

通过 minDate maxDate 属性可控制日期范围。
• 默认最小日期为十年前；
• 默认最大日期为十年后。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["2024", "08", "10"]
  
  build() {
    Column(){
      IBestDatePicker({
        title: "选择日期",
        minDate: new Date("2020-05-01"),
        maxDate: new Date("2028-05-01"),
        value: $selectValue,
        onConfirm: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        },
        onChange: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        }
      })
    }
  }
}

选项类型 ​

选项类型

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["2024", "08"]
  
  build() {
    Column(){
      IBestDatePicker({
        title: "选择日期",
        minDate: new Date("2020-05"),
        maxDate: new Date("2028-05"),
        isShowDay: false,
        value: $selectValue,
        onConfirm: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        },
        onChange: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        }
      })
    }
  }
}

显示单位 ​

显示单位

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["2024", "08", "18"]
  
  build() {
    Column(){
      IBestDatePicker({
        title: "选择日期",
        minDate: new Date("2020-05-01"),
        maxDate: new Date("2028-05-01"),
        showUnit: true,
        value: $selectValue,
        onConfirm: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        },
        onChange: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        }
      })
    }
  }
}

过滤选项 ​

过滤选项

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State selectValue: string[] = ["2024", "08"]
  filter(type: string, options: IBestPickerOption[]): IBestPickerOption[]{
    if (type === 'month') {
      return options.filter((option) => Number(option.value) % 6 === 0)
    }
    return options
  }
  build() {
    Column(){
      IBestDatePicker({
        title: "选择日期",
        minDate: new Date("2020-05"),
        maxDate: new Date("2028-05"),
        isShowDay: false,
        filter: this.filter,
        value: $selectValue,
        onConfirm: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        },
        onChange: (value: IBestDatePickerResultType) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前选中的日期, 支持双向绑定string[][]
minDate最小可选日期Date十年前
maxDate最大可选日期Date十年后
isShowDay是否显示日列booleantrue
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组件使用时传入, 可实现多个DatePicker联动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: IBestDatePickerResultType
onConfirm点击确定按钮时触发value: IBestDatePickerResultType
onCancel点击取消按钮时触发-

IBestDatePickerResultType 数据结构 ​

参数说明类型
dateStr选中的日期字符串string
date选中的日期Date
year选中的年份string
month选中的月份string
day选中的日期string