Calendar 日历

介绍

日历用于选择单个、多个日期或日期范围。

引入

import { IBestCalendar, IBestCalendarDialog, CalendarConfirmResultType } from "@ibestservices/ibest-ui";

代码演示

选择单个日期

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value))
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择单个日期',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

选择多个日期

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择多个日期',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        type: "danger",
        selectType: "multiple",
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

选择日期区间

日期区间

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择日期区间',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        selectType: "range",
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

自定义选中样式

TIP

通过 type 属性可修改选中样式，支持 primary、success、warning、danger 四种选中类型，默认为 primary，也可通过selectedColor属性自定义选中颜色，同时设置时selectedColor优先。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择日期',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        type: "danger",
        selectedColor: "#58db6b",
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

显示农历

TIP

通过 isShowLunar 属性可设置显示农历，通过 cornerRadius 属性可设置弹框圆角。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择日期',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        isShowLunar: true,
        cornerRadius: 20,
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

自定义日期范围

TIP

通过 minDate 属性可设置最小日期，maxDate 属性可设置最大日期。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择日期',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        selectType: "multiple",
        selectedStyleType: "circle",
        minDate: new Date(),
        maxDate: new Date("2025-01-01"),
        confirmBtnColor: "#ed4040",
        confirmBtnText: "完成",
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

区间最大范围

TIP

通过 maxRange 属性可设置区间最大范围。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择日期区间',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        type: "danger",
        selectType: "range",
        maxRange: 7,
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

自定义周起始日期

TIP

通过 weekFirstDay 属性可以自定义周起始日期。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择日期',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        weekFirstDay: "日",
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

显示月份背景水印

TIP

通过 isShowMark 属性可以显示月份背景水印。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State visible: boolean = false
  @State selectDate: string = "请选择日期"
  onDialogConfirm(value: Array<CalendarConfirmResultType>): void {
    console.log("onConfirm", JSON.stringify(value)) 
    this.selectDate = value.map(item => item.dateStr).join(",")
  }
  build() {
    Column(){
      IBestCell({
        title: '选择日期',
        value: this.selectDate,
        onClickCell: () => {
          this.visible = true
        }
      })
      IBestCalendarDialog({
        visible: $visible,
        weekFirstDay: "日",
        onConfirm: (value: Array<CalendarConfirmResultType>): void => this.onDialogConfirm(value)
      })
    }
  }
}

平铺展示

点我查看代码

@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCalendar({
        isShowLunar: true,
        weekFirstDay: "日",
        selectedStyleType: "normal",
        selectType: "multiple",
        selectedColor: "#ed4040",
        isShowMark: true,
        onConfirm: (value: Array<CalendarConfirmResultType>) => {
            let text = value.map(item => item.dateStr).join(",")
            promptAction.showDialog({
                message: `当前日期为：${text}`,
                alignment: DialogAlignment.Center
            })
        }
      })
    }
  }
}

打卡模式

TIP

设置 clock 为 true, 可开启打卡模式, 打卡模式下只能切换年月, 不能选择日期.

点我查看代码

import dayjs from "@hview/dayjs"
@Entry
@Component
struct DemoPage {
  @State clockDate: Array<string> = [dayjs().startOf("month").format('YYYY-MM-DD')]
  build() {
    Column({space: 14}){
      IBestButton({
        type: "primary",
        text: "打卡",
        onClickBtn: () => {
          this.clockDate.push(dayjs(this.clockDate[this.clockDate.length-1]).add(1, 'day').format("YYYY-MM-DD"))
        }
      })
      IBestCalendar({
        clock: true,
        defaultSelectedDate: this.clockDate
      })
    }
  }
}

API

Calendar @Props

参数	说明	类型	默认值
type	主题类型，可选值为 `primary` `success` `warning` `danger`	string	`primary`
defaultSelectedDate	默认选中日期	string[]	`[]`
itemWidth	每一项宽度	string \| number	`50`
weekFirstDay	周起始日期	string	`一`
isShowLunar	是否显示农历	boolean	`false`
selectType	选择类型，可选值为 `single` `multiple` `range`	string	`single`
selectedStyleType	选中样式，可选值为 `normal` `circle`	string	`normal`
selectedColor	自定义选中颜色	ResourceColor
maxRange	`selectType` 为 `range` 时，最多可选天数，-1为无限制	number	`-1`
minDate	最小可选日期	Date
maxDate	最大可选日期	Date
isShowMark	是否显示月份背景水印	boolean	`false`
isShowHeader	是否显示头部	boolean	`true`
isShowConfirmBtn	是否显示底部确定按钮	boolean	`false`
confirmBtnColor	确认按钮颜色	ResourceColor	`#3D8AF2`
confirmBtnText	确认按钮文案	string	`确认`
cornerRadius	弹框圆角	string \| number	`10`
clock	开启打卡模式	boolean	`false`
clockSuccessText	打卡成功文案	ResourceStr	`已成功`
isShowUnClock	是否显示未打卡`	boolean	`true`
unClockText	未打卡文案	ResourceStr	`未打卡`

CalendarDialog @Props

TIP

CalendarDialog包含Calendar除 isShowConfirmBtn 以外所有属性，CalendarDialog的 isShowConfirmBtn 属性默认为selectType不为single时显示，以下仅列Calendar不包含的属性

参数	说明	类型	默认值
visible	弹框展示状态	boolean	`false`
isModal	是否为模态窗口	boolean	`true`
offsetY	弹框底部偏移量	number	`0`
cornerRadius	弹框圆角	string \| number	`10`

Events

事件名	说明	回调参数
onConfirm	选择日期后的回调，`selectType` 为 `multiple` 时需点击按钮触发	`value: CalendarConfirmResultType[]`

Calendar 日历 ​

介绍 ​

引入 ​

代码演示 ​

选择单个日期 ​

选择多个日期 ​

选择日期区间 ​

自定义选中样式 ​

显示农历 ​

自定义日期范围 ​

区间最大范围 ​

自定义周起始日期 ​

显示月份背景水印 ​

平铺展示 ​

打卡模式 ​

API ​

Calendar @Props ​

CalendarDialog @Props ​

Events ​

Calendar 日历

介绍

引入

代码演示

选择单个日期

选择多个日期

选择日期区间

自定义选中样式

显示农历

自定义日期范围

区间最大范围

自定义周起始日期

显示月份背景水印

平铺展示

打卡模式

API

Calendar @Props

CalendarDialog @Props

Events