一个uniapp用的日历组件

5,659 阅读3分钟

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

1. API

1.1 基础用法

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

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

1.gif

选择多个日期

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

2.gif

选择范围日期

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

3.gif

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

4.gif

1.2 平铺展示

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

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

1.png

1.3 标题文字

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

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

2.png

1.4 主题颜色

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

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

3.png

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.gif

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>

2.png

1.8 是否显示标题

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

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

1.png

1.9 是否显示操作栏

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

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

4.png

1.10 是否显示确定按钮

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

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

5.png

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>

1.png

2. Attributes

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

3. Events

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

4. Slot

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