Vue3插件

需要vue3版本

Install

npm i wm-date-picker-ui-ts -S

Quick Start

import { createApp } from 'vue'

import 'wm-date-picker-ui-ts/datePicker-ui.css'
import datePicker from 'wm-date-picker-ui-ts'

const app = createApp(App)

app.use(datePicker).mount('#app')

API

| 参数 | 说明 | 类型 | 默认值 | |--------|--------|-------|---------| | initMonth | 初始化日期 | String/Date | 当天 | | calendarMode | 周起始日 | 'Sunday'：周日， 'Monday'：周一 | Monday | | pickerOptions | 日历多选数据项配置 | Object | - | | readOnly | 只读 | Boolean | false | | isShowTitle | 是否展示日历标题 | Boolean | true | | selectMode | 选择模式 | 'single'：单选， 'multiple'：多选 ， 'series'：范围选择 | single | | leftCornerText | 日期左上角文字提示 | String | '' | | rightCornerText | 日期右上角文字提示 | String | '' | | startCornerText | 范围选择时，开始位置-日期底部提示（selectMode为'series'时，有效） | String | 开始 | | endCornerText | 范围选择时，结束位置-日期底部提示（selectMode为'series'时，有效） | String | 结束 | | startEndCornerText | 范围选择时，开始和结束位置相同-日期底部提示（selectMode为'series'时，有效） | String | 始/终 | | lunarHolidays | 设置农历节假日 | Object{'0101':'春节'} | {} | | gregorianHolidays | 设置公历节假日 | Object{'0101':'元旦'} | {} | | defaultSingleCheckedDates | 设置默认选中日期 | Date[] ， string[] ， number[] ， SetDateObjectType[] ， string ， Date ， number ， SetDateObjectType | '' | | defaultSeriesCheckedDates | 设置默认范围选中日期 | SetDateObjectType[] ， SetDateObjectType[][] | [] |

Date options

| 参数 | 说明 | 类型 | 默认值 | |-----|------|----|---------| | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function(Date) | - | | cellClassName | 设置日期的自定义 className，参数为当前日期，要求返回 String | Function(Date) | - |

datePicker Methods

| 方法名 | 说明 | 参数 | |--------|------|-----| | nextMonth | 下一个月 | - | | prevMonth | 上一个月 | - | | toTargetDate | 去到指定的月份 | 目标日期 （YYYY-MM-DD）String / Date / number | | setCheckedDates | 设置要选中的日期 | dates：Date[] , YYYY-MM-DD[] , number[] , SetDateObjectType[] , ‘YYYY-MM-DD’ , Date , number , SetDateObjectType | | getAllSelectedDate | 获取所有选中的日期 | - | | clearSelectedDate | 参数为空时，请空所有选中日期；当参数为日期或日期数组时，清除指定的日期或数组中的日期 | dates ?: Date , ‘YYYY-MM-DD’ , number , Date[] , YYYY-MM-DD[] , number[] |

datePicker Events

| 事件名称 | 说明 | 回调参数 | |---------|------|--------| | singleSelect | 选中单个日期时触发 | 参数1: 当前选中的日期， 参数2: 已选中的所有单选日期数组 | | seriesSelect | 选中日期范围时触发 | 参数1: 当前选中的日期， 参数2: 已选中的所有范围选中日期数组 | | singleDelete | 取消选中的单个日期时触发 | 当前删除的日期 | | seriesDelete | 取消选中的日期范围时触发 | 参数1：当前点击删除的日期， 参数2: 删除的范围日期数据数组 |

数据类型

interface SetDateObjectType {
  day: string, 
  leftCornerText?: string,
  rightCornerText?: string
}

interface dateOptionsType {
  lYear?: number;
  lMonth?: number;
  lDay?: number;
  Animal?: string;
  IMonthCn?: string;
  IDayCn?: string;
  cYear?: number;
  cMonth?: number;
  cDay?: number;
  gzYear?: string;
  gzMonth?: string;
  gzDay?: string;
  isToday?: boolean;
  isLeap?: boolean;
  nWeek?: number;
  ncWeek?: string;
  weekOfYear?: string;
  isTerm?: boolean;
  Term?: string | null;
  astro?: string;
  vacation?: string | null;
  disabled?: boolean;
  customDateStyle?: string;
  isSelected?: boolean;
  checkDateStartStyle?: boolean;
  checkDateStartEndStyle?: boolean;
  readonly?: boolean;
  leftTip?: string;
  rightTip?: string;
  customText?: string;
  formatDay?: string;
  day?: string;
  month?: string;
  year?: string;
  isCurrentMonth?: boolean;
  isSingleClick?: boolean;
  leftCornerText?: string;
  rightCornerText?: string;
  bottomCornerText?: string;
  isStartDate?: boolean;
  isSeriesMiddle?: boolean;
  cellClassName?: string;
}

Construct待补充

1. 需要添加一个 change 事件