Calendar 日历

此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中。

注意

此组件依赖插件dayjs，使用npm install dayjs --save进行安装。

安装完成后，在main.js中挂载CookUni({dayjs})插件，才能正常使用。

基本用法

calendar.value.open({
    // 属性
    mode:'single',
    // ...

    // 事件
    confirm: (res) => {},
    // ...
});

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String	null	日程名 用于事件中返回	All
mode	String	single	选择模式，single、multiple、range	All
value	Array,String,Number,Object	null	当前选中的值 mode=single时"String,Number,Object" mode=multiple时"Array" mode=range时"Array"，[开始时间,结束时间]	All
defaultDate	String,Number,Object	null	默认日期，默认为今天 视图会切换当前日期所在月	All
listInfo	Array	[]	载入日期数据信息 [{ date:'', info:'', bgColor:'', // 背景色 color:'', // 日期文字颜色 infoColor:'', // 信息文字颜色 disabled:false, // 是否禁止选中 opacity:null, // 替换disabled=true时的半透明状态 badge:{isDot:false,bgColor:'',color:'',text:''}, // 徽标 }]	All
lunar	Boolean	false	显示农历	All
min	String,Number,Object	null	最小日期	All
max	String,Number,Object	null	最大日期	All
iosLayout	Boolean	false	是否ios星期布局	All
showMonthBg	Boolean	false	是否显示月份为背景	All
allowSelectSameDay	Boolean	true	是否允许日期范围的起止时间为同一天，mode=range有效	All
selectStartText	String	开始	选中开始文字，mode=range有效	All
selectEndText	String	结束	选中结束文字，mode=range有效	All
itemStyle	Object	{ color:'c-t-main', infoColor:'c-t-regular', radius:'16rpx', 今天背景色和文字颜色 todayBgColor:'', todayColor:'c-t-primary', 选中项颜色和文字颜色 activeBgColor:'c-bg-primary', activeColor:'#fff', mode=range时，选中的背景和文字颜色 activeRangeBgColor:'', activeRangeColor:'', }	日期项样式配置	All
weekStyle	Object	{}	星期样式	All
bdrColor	String	c-bdr-lighter	默认边框色， 星期的边框、标题下边框	All
prevIconProps	Object	{}		All
nextIconProps	Object	{}		All
currentTextProps	Object	{}		All
todayProps	Object	{}	今日按钮配置	All
insert	Boolean	false	插入模式，false时为弹窗模式	All
注意	以下	配置	在insert=false时有效
title	String,Object	null	标题 object请c-text组件的pros	All
bottomBtn	Boolean	false	按钮位置是否在底部 为true时，为按钮样式，false时为文字样式	All
cancelText	String,Object	取消	按钮 object请c-text和c-btn组件的pros	All
confirmText	String,Object	确定		All
radius	Number,String	null	背景圆角	All
position	String	bottom	打开位置，top，center，bottom	All
closeOnMaskClick	Boolean	true	点击遮罩关闭	All
maskBgColor	String	rgba(0, 0, 0, 0.4)	弹出层背景	All
animation	Boolean	true	开启弹出层动画	All
titleProps	Object	{}	标题文本配置 参考c-text组件的props	All
customTabBar	Boolean	false	是否自定义tabBar	MP-WEIXIN
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

提示

微信小程序tabBar页面使用，当自定义tabBar时，需要设置customTabBar为true，否则会显示不正确。

事件

事件名	说明
open	{name}
close	{name}
confirm	{name,value}，value项的值为一个dayjs对象
cancel	{name}
selected	{name,value}
viewChange	viewDate

插槽

插槽名	说明
default	按钮下方，日历上方
headerLeft	日历标题左侧
after	日历下方

方法

名称	说明
open(null|props)	打开Calendar 传递props时，将覆盖组件props
close()	关闭

示例

<template>
    <c-calendar ref="myCalendar" />
    <c-btn @click="openCalendar">打开</c-btn>
</template>
<script setup>
import { ref } from 'vue'
const myCalendar = ref(null)
function openCalendar(){
    myCalendar.value.open({
        value: '2021-01-01',
        confirm:(res)=>{
            console.log(res)
        }
    })
}
</script>