wm-date-vue2ts-picker-ui/README.md

vue2，日历面板组件，支持单选、多选、连续选中等功能， 汉语、字符、拼音混合搜索组件

# wm-vue2-js-calendar

### Vue2插件
```
需要vue2版本
```
## 更新
```shell

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

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

## Install
```shell

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

```

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