日历 y-calendar

该组件提供日历选择功能（包括范围选择）

组件名称

y-calendar

基础用法

选择范围及回填单个或范围

最小值/最大值

年度模式-单选

年度模式-范围

年度模式-最大最小值

年月模式-单选

年月模式-范围

年月模式-最大最小值

季度模式-单选

季度模式-范围

季度模式-最大最小值

属性

/**
 * 属性
 */
export interface CalendarBasicProps extends Record<string, unknown> {

  /**
 * 参数
 */
  options: CalendarOptions

  /**
   * 值，必填，开始日期
   */
  modelValue: string
}

/**
 * 日历参数
 */
export interface CalendarOptions {
  /**
   * 日期类型, 默认'date'
   */
  type?: CalendarTypeEnum

  /**
   * 是否多选，默认：false
   */
  isMultiSelect?: boolean

  /**
   * 是否显示工具条，默认：true
   */
  showToolBar?: boolean

  /**
   * 结束日期
   */
  endDate?: string

  /**
   * 最小值
   */
  minDate?: string

  /**
   * 最大值
   */
  maxDate?: string

  /**
   * 日历快捷键配置
   */
  shortcuts?: ShortcutsItem[]
}

/**
 * 日历快捷键
 */
export interface ShortcutsItem {
  /**
   * 文字
   */
  text: string

  /**
   * 值
   */
  value: Function
}

export enum CalendarTypeEnum {
  /**
   * 年月日模式
   */
  DATE= 'date',

  /**
   * 年月模式
   */
  MONTH = 'month',

  /**
   * 年模式
   */
  YEAR = 'year',

  /**
   * 季度
   */
  QUARTER = 'quarter',
}

事件

/**
 * 事件
 */
export interface Events {

  /**
   * 日期选中事件
   */
  onSelectDate: SelectDateCallbackResult
}

/**
 * 选中日期回调参数
 */
export interface SelectDateCallbackResult {

  /**
   * 开始日期
   */
  startDate: Dayjs

  /**
   * 结束日期
   */
  endDate?: Dayjs
}