# 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](https://cli.vuejs.org/config/).


## Install
```shell

npm i wm-date-picker-ui -S

```

## Quick Start
``` javascript

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

```



<!-- 问题 -->

1. 初始化选中值 - 变化时，不能实时更新
2. 手动选中功能有问题
3. 设置默认选中的日期 - 结构复杂