Wm-date-picker-ui NPM

wm-calendar-panel

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

Install

npm i wm-date-picker-ui -S

Quick Start

import Vue from 'vue'
import 'wm-date-picker-ui/datePicker-ui.css'
import Datepicker from 'wm-date-picker-ui'

Vue.use(Datepicker)

API

参数	说明	类型	默认值
initDate	初始化日期	String/Date	当天
dateOptions	日历多选数据项配置	Object	-
readonly	只读	Boolean	false
isShowTitle	是否展示日历标题	Boolean	true
isRadio	是否为单选	Boolean	true
isRange	是否为范围选中（isRadio为false时，有效）	Boolean	false
leftTip	日期左上角文字提示（isRadio为false时，有效）	String	''
rightTip	日期右上角文字提示（isRadio为false时，有效）	String	''
startText	范围选择时，开始位置-日期底部提示（isRadio为false且isRange为true时，有效）	String	开始
endText	范围选择时，结束位置-日期底部提示（isRadio为false且isRange为true时，有效）	String	结束
middleText	范围选择时，开始和结束位置相同-日期底部提示（isRadio为false且isRange为true时，有效）	String	始/终
radioList	单选和多选时非范围选择的列表数据	dateOptionsType[]	[]
checkList	多选时范围选择的列表数据	Array<dateOptionsType[]>	[]
lunarCalendar	设置农历节假日	Object{'0101':'春节'}	{}
gregCalendar	设置公历节假日	Object{'0101':'元旦'}	{}

Date options

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

datePicker Methods

方法名	说明	参数
nextMonth	下一个月	-
prevMonth	上一个月	-
toTargetDate	去到指定的月份	目标日期（YYYY-MM-DD）String / Date
setCheckedDates	设置要选中的日期	选中的日期对象 { checkList, radioList }; checkList: 多选时范围选择的日期范围数组； radioList: 单选或多选时非范围选择的日期数组；
getAllSelectDate	获取所有选中的日期	-
clearDate	参数为空或空数组时，请空所有选中日期；当参数为日期数组时，清除指定的数组中的日期	Array'2022-09-08'

datePicker Events

事件名称	说明	回调参数
selected	选中日期时触发	选中的日期数组
cancel	取消选中的日期时触发	取消选中的日期数组

数据类型

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;
}