Calendar 日历

日历组件，用于选择日期或日期范围，支持单选、多选、范围选择，支持弹窗和内联模式

日历组件，用于选择日期或日期范围，支持单选、多选、范围选择，支持弹窗和内联模式

演示

9:41

代码示例

<re-calendar :visible="baseVisible" :value="baseValue" @update:visible="onBaseVisible" @change="onBaseChange" @confirm="onBaseConfirm" @close="onClose" />
  <re-calendar :visible="multipleVisible" :value="multipleValue" type="multiple" @update:visible="onMultipleVisible" @change="onMultipleChange" @confirm="onMultipleConfirm" @close="onClose" />
  <re-calendar :visible="rangeVisible" :value="rangeValue" type="range" :min-date="rangeMinDate" :max-date="rangeMaxDate" @update:visible="onRangeVisible" @change="onRangeChange" @confirm="onRangeConfirm" @close="onClose" />
  <re-calendar :visible="customVisible" :value="customValue" :min-date="customMinDate" :max-date="customMaxDate" @update:visible="onCustomVisible" @change="onCustomChange" @confirm="onCustomConfirm" @close="onClose" />
  <re-calendar :use-popup="false" type="multiple" @select="onInlineSelect" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-calendar />。

API

Calendar Props

名称类型默认值描述必传
valuestring | number | number[]''当前值N
typestring'single'-N
firstDayOfWeeknumber0-N
minDatestring''-N
maxDatestring''-N
customStylestring''自定义样式N
usePopupbooleantrue-N
visiblebooleanfalse-N
titlestring''标题N
confirmBtnstring'确定'-N

Calendar Events

名称参数描述
changedetail: { value: string }值变化时触发
selectdetail: { value: string }选择时触发
confirmdetail: { value: string }确认时触发
closedetail: { trigger: string }关闭时触发
update:visiblevalue: boolean显隐变化时触发

Calendar Slots

名称描述
title-
Address 地址选择
省市区三级联动地址选择器，支持自定义省份数据
Cascader 级联选择器
多层级数据选择器，支持选项联动和自定义标题