CalendarSelect 日历选择控件

专门为配合表单组件c-form而设计，用于扩展c-calendar组件。

使用时需要通过openCalendar事件和c-calendar组件绑定使用，详细用法请看下方示例。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String		标识，事件中返回	All
modelValue	Array,String,Number,Object		当前选中的值 mode=single时"String,Number,Object" mode=multiple时"Array" mode=range时"Array"，[开始时间,结束时间]	All
min	String,Number,Object	null	最小日期	All
max	String,Number,Object	null	最大日期	All
mode	String	single	选择模式，single、multiple、range	All
format	String	null	显示的日期格式化	All
valueFormat	String	null	值格式化	All
placeholder	String	请选择	水印	All
placeholderColor	String	c-t-placeholder	水印颜色	All
title	String,Object		标题 object请c-text组件的pros	All
rightIcon	String,Boolean	arrow-right	显示右侧的箭头	All
iconProps	Object	{}	右侧图标配置	All
calendarProps	Object	{}	calendar配置	All
textProps	Object	{}	文字配置 参考c-text组件的props	All
delimiter	String	null	label的分隔符	All
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

事件

事件名	说明
update:modelValue
openCalendar	传递用于打开calendar的props
change	value,res
closeCalendar	{name}

插槽

插槽名	说明
before	前置
default	文本后面，icon图标前面
after	后置

组件依赖

本组件依赖c-calendar组件，使用前请先引入，并通过calendarSelectMixin进行绑定。

组合式Api：

<script setup>
import {useCalendarSelect} from "../../uni_modules/cook-uni/components/c-calendar-select/calendarSelectMixin";
const calendar = ref(null);
const onCalendarOpen = useCalendarSelect(calendar);
</script>

选项式Api：

<script>
    import calendarSelectMixin from "../../uni_modules/cook-uni/components/c-calendar-select/calendarSelectMixin";
    export default {
        mixins:[calendarSelectMixin]
    }
</script>

绑定组件：

<c-calendar-select @openCalendar="onCalendarOpen" />

示例

<template>
    <c-form :model="formData">
        <c-form-item label="日期" prop="birthday">
            <!--使用组件-->
            <c-calendar-select v-model="formData.birthday" @openCalendar="onCalendarOpen" />
        </c-form-item>
    </c-form>

    <!--calendar组件，必须-->
    <c-calendar ref="calendar" />
</template>
<script setup>
import {useCalendarSelect} from "../../uni_modules/cook-uni/components/c-calendar-select/calendarSelectMixin";

// 绑定calendar组件
const calendar = ref(null);
const onCalendarOpen = useCalendarSelect(calendar);

const formData = {
    birthday:''
}
</script>