Calendar 日历

日历组件用于选择日期，支持单选与多选、内联与弹窗两种形态，并可配置尺寸、滚动方向、最小可选日期与日期描述。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-calendar 的用法，可按需组合。

<template>
  <mu-calendar v-model="singleDate"></mu-calendar>
</template>

绑定值

单选时绑定日期字符串，多选时绑定日期数组，格式为 YYYY-MM-DD。

<mu-calendar v-model="singleDate"></mu-calendar>

弹窗形态

设为弹窗形态后带遮罩与底部确定、取消操作，需配合 show 控制显示，并在关闭时收起。

<mu-button type="primary" @click="showPopup = true">选择日期</mu-button>
<mu-calendar v-model="popupDate" :popup="true" :show-info="true" :show="showPopup"
  @close="showPopup = false"></mu-calendar>

显示

弹窗形态下控制日历是否显示。

<mu-calendar v-model="popupDate" :popup="true" :show="showPopup"></mu-calendar>

多选

开启后可选择多个日期，绑定值为日期数组。

<mu-calendar v-model="multiDates" :multiple="true" :descriptions="descs"></mu-calendar>

日期描述区域

控制是否显示底部的日期描述区域。

<mu-calendar v-model="singleDate" :descriptions="descs" :show-info="true"></mu-calendar>

尺寸

可选 small、default、large。

<mu-calendar v-model="sizeSmall" size="small"></mu-calendar>
<mu-calendar v-model="sizeDefault"></mu-calendar>
<mu-calendar v-model="sizeLarge" size="large"></mu-calendar>

方向

设置日期滚动方向，可选 vertical、horizontal。

<mu-calendar v-model="verticalDate"></mu-calendar>
<mu-calendar v-model="horizontalDate" direction="horizontal"></mu-calendar>

最小可选日期

minDate 之前的日期不可选，为空时以当天为最小可选日期。

<mu-calendar v-model="minDateVal" min-date="2099-01-01"></mu-calendar>

日期描述

descriptions 接收数组，每项包含 date（格式 YYYY-MM-DD）与 text 描述文字，显示在对应日期下方。

<mu-calendar v-model="singleDate" :descriptions="descs"></mu-calendar>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
v-model	绑定值，单选为日期字符串（YYYY-MM-DD），多选为日期字符串数组	string | string[]	-
popup	是否为弹窗形态，带遮罩与底部确定、取消操作	boolean	false
show	弹窗形态下是否显示	boolean	false
multiple	是否多选	boolean	false
showInfo	是否显示底部日期描述区域	boolean	false
size	尺寸，可选 small、default、large	string	default
direction	日期滚动方向，可选 vertical、horizontal	string	vertical
minDate	最小可选日期（YYYY-MM-DD），为空时取当天	string	-
descriptions	日期描述列表	any[]	[]
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	string	-

事件

组件支持以下事件。

事件名	说明	回调参数
change	选择日期变化时触发，单选为日期字符串，多选为日期数组	value: any
confirm	弹窗形态下点击确定时触发	value: any
close	关闭时触发，包括弹窗取消、确定或点击遮罩	-