可能有人会问,
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 | 自定义日历顶部的内容 |