IBest-UI-V2

Appearance

DatePicker 日期选择 ​

介绍 ​

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

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

TIP

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

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

选项类型 ​

选项类型

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

显示单位 ​

显示单位

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

过滤选项 ​

过滤选项

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local 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: this.selectValue!!,
        onConfirm: (value: IBestDatePickerResult) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        },
        onChange: (value: IBestDatePickerResult) => {
          IBestToast.show(this.selectValue.join("-") , value.dateStr)
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value当前选中的日期, 支持双向绑定string[][]
minDate最小可选日期Date十年前
maxDate最大可选日期Date十年后
isShowDay是否显示日列booleantrue
showUnit是否显示单位booleanfalse
title标题ResourceStr''
itemHeight单项高度string | number44
visibleItemCount可见选项数量number6
showToolBar是否显示顶部栏booleantrue
confirmText确认按钮文字ResourceStr确定
cancelText取消按钮文字ResourceStr取消
filter过滤器(type: string, options: IBestPickerOption[]) => IBestPickerOption[]null
groupId分组id, 通常在配合PickerGroup组件使用时传入, 可实现多个DatePicker联动string | number''
horizontal是否横向booleanfalse
itemWidth单项宽度string | number44
contentHeight整体高度, 仅横向时生效string | number44
optionFontSize选项字体大小string | number16
lunar是否显示农历booleanfalse
radius外部圆角string | number0

Events ​

事件名说明事件类型
onChange某一列选项变更后触发(value: IBestDatePickerResult) => void
onConfirm点击确定按钮时触发(value: IBestDatePickerResult) => void
onCancel点击取消按钮时触发() => void

IBestDatePickerResult 数据结构 ​

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