一个uniapp用的日历组件

可能有人会问，uView、vant等已经写好了日历组件，挺适用的，为什么还要自己去写一个，这里说明一下，因为项目的需求，要求可以快速的切换日历且能够多选日历，同时日历不是弹框而是平铺出来的。而uView有快捷切换，但是不能平铺，甚至不能多选；vant有多选也有平铺，但是没有快捷切换，我也去看了element-ui提供的日历组件，不经没法快速选择年，连多选、范围选择都没有。没有办法了，只能自己去写一个喽，自己动手，丰衣足食。

1. API

1.1 基础用法

使用md-calendar组件，选择单个日期

<md-calendar v-model="isShowCalendar"></md-calendar>

选择多个日期

<md-calendar
	type="multiple"
	v-model="isShowCalendar"
></md-calendar>

选择范围日期

<md-calendar
	type="range"
	v-model="currDate"
	:show.sync="isShowCalendar"
></md-calendar>

点击日期时间，可以进入输入模式，快速切换至指定日期

1.2 平铺展示

通过将poppable属性设置为true可以将日历直接展示出来，而不是以弹框的方式出现，通常会同时将show-confirm 设置为true，不显示确定按钮

<md-calendar
	:poppable="false"
        :show-confirm="false"
></md-calendar>

1.3 标题文字

通过title属性来设置日历的标题内容

<md-calendar
        title="自定义日历标题"
        v-model="isShowCalendar"
></md-calendar>

1.4 主题颜色

通过color可以控制按钮的颜色风格，默认为蓝色

<md-calendar
	color="#ee0a24"
	v-model="isShowCalendar"
></md-calendar>

1.5 最小值与最大值

通过min-date控制最小可以选择的时间，通过max-date控制最大可以选择的时间

<md-calendar
	:min-date="new Date('2021-8-11')"
	:max-date="new Date('2021-9-20')"
	v-model="isShowCalendar"
></md-calendar>

1.6 格式化

通过formatter控制返回的值的格式，默认为yyyy-MM-dd

<md-calendar
	v-model="isShowCalendar"
	formatter="yyyy-MM-dd HH:mm:ss"
></md-calendar>

1.7 是否显示数字水印

通过show-mark控制是否显示数字水印，默认显示

<md-calendar
	v-model="isShowCalendar"
	:show-mark="false"
></md-calendar>

1.8 是否显示标题

通过show-title控制是否显示标题，默认显示

<md-calendar
	v-model="isShowCalendar"
	:show-title="false"
></md-calendar>

1.9 是否显示操作栏

通过show-operation控制是否显示操作栏，默认显示

<md-calendar
	v-model="isShowCalendar"
	:show-operation="false"
></md-calendar>

1.10 是否显示确定按钮

通过show-confirm控制是否显示确定按钮，默认显示

<md-calendar
	v-model="isShowCalendar"
	:show-confirm="false"
></md-calendar>

1.11 是否允许点击遮罩关闭

通过mark-close控制是否允许点击遮罩关闭弹框，默认允许

<md-calendar
	v-model="isShowCalendar"
	:mark-close="false"
></md-calendar>

1.12 确定按钮文字

通过confirm-text设置确定按钮文字

<md-calendar
	v-model="isShowCalendar"
	confirm-text="提交"
></md-calendar>

2. Attributes

参数	说明	类型	可选值	默认值
default-date	默认日期	Date	-	-
show	日历显示状态(可以使用v-model双向绑定)	Boolean	true/false	false
type	日历类型	String	multiple/range	single
poppable	九宫格切图中心宽高	Boolean	true/false	true
title	日历标题	String	-	日期选择
color	主题颜色（控制按钮、选中时的颜色）	String	-	#1989fa
min-date	最小可选择的日期	Date	-	-
max-date	最大可选择的日期	Date	-	-
formatter	数值格式化	String	-	yyyy-MM-dd
show-mark	是否显示日期水印	Boolean	true/false	true
show-title	是否显示标题	Boolean	true/false	true
show-operation	是否显示操作栏	Boolean	true/false	true
show-confirm	是否显示确定按钮	Boolean	true/false	true
mark-close	是否允许点击遮罩关闭弹框	Boolean	true/false	true
confirm-text	确定按钮文字	String	-	确定

3. Events

参数	说明	回调参数
change	选择日期时触发	value: Date []
confirm	点击确定按钮时触发	value: Date []
open	打开弹出层时触发/显示平铺页面	-
close	关闭弹出层时触发/隐藏平铺页面	-

4. Slot

参数	说明
title	自定义日历顶部的内容