Wm-date-vue2ts-picker-ui NPM

wm-vue2-js-calendar

Vue2插件

需要vue2版本

更新

  方法：updataDate - 完善选中日期的状态更新
  事件：currentMonth - 添加今天按钮点击事件

Install

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

Quick Start

import Vue from 'vue'

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

Vue.use(datePicker)

日历组件

<date-picker />

API

参数	说明	类型	默认值
initMonth	初始化日期	String/Date	当天
calendarMode	周起始日	'Sunday'：周日， 'Monday'：周一	Monday
pickerOptions	日历多选数据项配置	Object	-
readOnly	只读	Boolean	false
isShowTitle	是否展示日历标题	Boolean	true
selectMode	选择模式	'single'：单选， 'multiple'：多选， 'series'：范围选择	single
leftCornerText	日期左上角文字提示, 值为null时，不做赋值处理	String/null	''
rightCornerText	日期右上角文字提示 , 值为null时，不做赋值处理	String/null	''
isShowCloseTip	是否显示关闭图标（selectMode为'single'时，有效）	Boolean	false
startCornerText	范围选择时，开始位置-日期底部提示（selectMode为'series'时，有效）, 值为null时，不做赋值处理	String/null	开始
endCornerText	范围选择时，结束位置-日期底部提示（selectMode为'series'时，有效）, 值为null时，不做赋值处理	String/null	结束
startEndCornerText	范围选择时，开始和结束位置相同-日期底部提示（selectMode为'series'时，有效）, 值为null时，不做赋值处理	String/null	始/终
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[]
updataDate	更新日期数据信息｜ dateOptionsType , dateOptionsType[]

datePicker Events

事件名称	说明	回调参数
prevMonth	点击上一个月按钮触发	上个月 - ‘YYYY-MM’
nextMonth	点击下一个月按钮触发	下个月 - ‘YYYY-MM’
currentMonth	点击今天按钮触发	当前月 - ‘YYYY-MM’
singleSelect	选中单个日期时触发	参数1: 当前选中的日期，参数2: 已选中的所有单选日期数组
seriesSelect	选中日期范围时触发	参数1: 当前选中的日期，参数2: 已选中的所有范围选中日期数组
singleDelete	取消选中的单个日期时触发	当前删除的日期
seriesDelete	取消选中的日期范围时触发	参数1：当前点击删除的日期，参数2: 删除的范围日期数据数组
selectDate	选中单个日期时触发	参数：{ date: 当前点击选中的日期, seriesDate: 选中的范围日期数据数组 }
deleteDate	取消选中的日期时触发	参数：{ date: 当前点击选中的日期, seriesDate: 选中的范围日期数据数组 }
beforeSelect	选中日期前触发	参数1：{ date: 当前点击选中的日期, seriesDate: 选中的范围日期数据数组 }，参数2: 回调函数（参数：true-继续执行选中，false-停止选中）
beforeDelete	删除日期前触发	参数1：{ date: 当前点击删除的日期, seriesDate: 删除的范围日期数据数组 }，参数2: 回调函数（参数：true-继续执行选中，false-停止选中）
change	日期发生改变时触发	参数：{ date: 当前触发日期, seriesDate: 产生改变的日期范围 }
warningContainDate	日期选择时，选择范围中包含已选或禁用日期时触发（selectMode为'series'时，有效）	参数：{ status: 状态, message: 提示信息 }

数据类型

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

汉语、字符、拼音混合搜索组件

<search-text 
  v-model="keyWord" 
  :data="dataArray(数据列表)" 
  :searchProperty="检索字符属性（默认text）" 
  :placeholder="placeholder"
  @change="(list) => { list (检索后返回的数据列表)}"
/>

vue2 日历面板单选多选连续选中手动设置节假日汉语、字符、拼音混合搜索组件

@everything-registry/sub-chunk-3156 @infinitebrahmanuniverse/nolb-wm

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago