wm-date-vue2ts-picker-ui

vue2，日历面板组件，支持单选、多选、连续选中等功能， 汉语、字符、拼音混合搜索组件
1,857
vue2 日历面板 单选 多选 连续选中 手动设置节假日 汉语、字符、拼音混合搜索组件
Install
npm install wm-date-vue2ts-picker-ui
Latest Version:1.8.6
License:ISC
Last Updated:Jul 17, 2025
Links: Gitee  ·  npm
Maintainer: wang123mengs

wm-vue2-js-calendar

Vue2插件

需要vue2版本

更新


  属性：isShowLunar - 是否展示农历及节假日和节气
  全局配置：{ isShowLunar: true, lunarHolidays: [], gregorianHolidays: [] }

  国际化配置：{ locale: 'zh-CN', messages: {} }
  方法-切换组件内语言：Vue.prototype.$setPluginLocale = function(locale) { i18n.locale = locale; };
  提供语言包：英语（en）、 越南语（vi）、 简体中文（zh-CN）、 繁体中文（zh-TW）

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, { isShowLunar: true, lunarHolidays: [], gregorianHolidays: [] })

日历组件

<date-picker />

API

参数 说明 类型 默认值
initMonth 初始化日期 String/Date 当天
calendarMode 周起始日 'Sunday'：周日， 'Monday'：周一 Monday
pickerOptions 日历多选数据项配置 Object -
readOnly 只读 Boolean false
isShowTitle 是否展示日历标题 Boolean true
isShowLunar 是否展示农历 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: 提示信息 }

国际化

  全局配置
  
  Vue.use(datePicker, {
    // 设置语言
    locale: 'zh-CN',
    // 设置语言包
    messages: {
      'zh-CN': {
        'datePicker': {
          'title': '日期选择器'
        }
      }
    }
  })

  语言切换
  Vue.prototype.$setPluginLocale = function(locale) {
    i18n.locale = locale;
  };

  提供语言包
  英语（en）、 越南语（vi）、 简体中文（zh-CN）、 繁体中文（zh-TW）

数据类型

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 (检索后返回的数据列表)}"
/>

Related Packages

@dullar/mercury

Advanced and highly reusable Mobile UI Components built on Vue2 & You can define...

8,553 6
vue2
@halobear/vue-upload

vue上传组件

460 1
vue2
vite-plugin-vue2

Vite plugin for Vue2

1,474,659 618
vue2 vite
vue-jstree

a tree plugin for vue2

137,015 630
vue2 tree
vite-plugin-git-revision

Vite plugin that generates VERSION and COMMITHASH files during build based on a...

21,961 11
vue2 vite

Version History

Version Released License
1.8.6 ISC
1.8.5 ISC
1.8.4 ISC
1.8.3 ISC
1.8.2 ISC