日历 Calendar

日历组件。

提示

弹窗类组件需放到页面根组件使用，否则可能会因为父元素层级问题导致点击等事件失效。

重要提示

需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';

兼容性

兼容：✅
不兼容：❌
未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

默认弹窗展示。

通过 startDate 属性设置开始日期，默认为当前日期。
通过 endDate 属性设置结束日期，默认当前日期后六个月。

vue

<template>
    <pure-calendar startDate="2025-01-01" endDate="2025-12-31"></pure-calendar>
</template>

切换器

通过 switchMode 属性设置切换器：
- none：不显示切换器，默认。
- month：只显示月份切换器。
- year-month：显示年份和月份切换器。

vue

<template>
    <pure-calendar switchMode="year-month"></pure-calendar>
</template>

日期选择模式

通过 mode 属性设置日期选择模式:
- single：单选模式，默认。
- multiple：多选模式。
- range：范围选择模式。

vue

<template>
    <pure-calendar mode="multiple"></pure-calendar>
</template>

格式化水印

通过 formatWatermark 属性设置格式化水印的函数：
- 参数： month 月份数据对象，详看下方数据格式说明。
- 返回值：需返回一个字符串，作为水印的内容。

vue

<template>
    <pure-calendar mode="multiple" :formatWatermark="formatWatermark"></pure-calendar>
</template>

<script setup>
// 格式化水印
function formatWatermark(month) {
    return `${month.month}月`;
}
</script>

格式化月标题

通过 formatMonthTitle 属性设置格式化月标题的函数：
- 参数： month 月份数据对象，详看下方数据格式说明。
- 返回值：需返回一个字符串，作为月标题的内容。

vue

<template>
    <pure-calendar mode="multiple" :formatMonthTitle="formatMonthTitle"></pure-calendar>
</template>

<script setup>
// 格式化月标题
function formatMonthTitle(month) {
    return `${month.year}/${month.month}`
}
</script>

自定义周文字

通过 week 属性自定义设置周文字。
需是一个数组。
默认为 ['日', '一', '二', '三', '四', '五', '六']。
注意：需保证数组长度为 7。
注意：需保证从周日开始到周六按顺序排列。

vue

<template>
    <pure-calendar :week="['周日', '周一', '周二', '周三', '周四', '周五', '周六']"></pure-calendar>
</template>

副标题

通过 subtitle 属性设置是否显示副标题。
通过 formatSubtitle 属性设置格式化副标题的函数：
- 参数： subtitle 月份数据对象，详看下方数据格式说明。
- 返回值：需返回一个字符串，作为副标题的内容。

vue

<template>
    <pure-calendar subtitle :formatSubtitle="formatSubtitle"></pure-calendar>
</template>

<script setup>
// 格式化副标题
function formatSubtitle(subtitle) {
    return `${subtitle.year}/${subtitle.month}`
}
</script>

格式化日期

通过 formatDay 属性设置格式化日期的函数：
- 参数： day 天数据对象，详看下方数据格式说明。
- 返回值：需返回一个字符串或数组，作为日期的内容，可以返回一个副文本字符串来自定义日期样式。

vue

<template>
    <pure-calendar :formatDay="formatDay"></pure-calendar>
</template>

<script setup>
// 格式化日期
function formatDay(day) {
    const dayStyle = "width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;";
    const labelStyle = "font-size: 0.75em; opacity: 0.25;";
    const badgeStyle = "width: 6px; height: 6px; border-radius: 50%; background: #FF0000; position: absolute; right: 5px; top: 5px; z-index: 2;";
    const text = day.selected ? "已选" : "未选";

    if (day.day > 10 && day.day < 20) {
        return `
            <div class="day" style="${dayStyle}">
                <div class="day-number">${day.day}</div>
                <div class="day-label" style="${labelStyle}">${text}</div>
                <div class="day-badge" style="${badgeStyle}"></div>
            </div>
        `;
    }
    return `
        <div class="day" style="${dayStyle}">
            <div class="day-number">${day.day}</div>
            <div class="day-label" style="${labelStyle}">${text}</div>
        </div>
    `;
}
</script>

数据格式

副标题

属性名	说明	类型
`date`	`Date` 对象	`Date`
`year`	年份	`Number`
`month`	月份	`Number`
`str`	年月字符串，格式为 `YYYY年MM月`	`String`

Month

属性名	说明	类型
`date`	`Date` 对象	`Date`
`year`	年份	`Number`
`month`	月份	`Number`
`str`	年月字符串，格式为 `YYYY年MM月`	`String`
`days`	天数据数组 `Array[Day]`	`Array`

Day

属性名	说明	类型
`date`	`Date` 对象	`Date`
`year`	年	`Number`
`month`	月	`Number`
`day`	日	`Number`
`week`	周几	`Number`
`str`	年月日字符串，格式为 `YYYY-MM-DD`	`String`
`selected`	选中状态	`Boolean`
`disabled`	禁用状态	`Boolean`

Props

属性名	说明	类型	默认值	可选值	版本
`hoverClass`	同 `view` 的 `hover-class`	`String`	`"pure-hover"`	`-`	`+1.0.0`
`startDate`	开始日期，类型为 `Function` 时需返回日期对象、日期字符串或时间戳	`[String, Date, Number, Function]`	`当天`	`-`	`+1.0.0`
`endDate`	结束日期，类型为 `Function` 时需返回日期对象、日期字符串或时间戳	`[String, Date, Number, Function]`	`当天后的6个月`	`-`	`+1.0.0`
`defaultDate`	默认选中的日期，类型为 `Function` 时需返回日期对象、日期字符串或时间戳	`[String, Date, Number, Function, Array]`	`null`	`-`	`+1.0.0`
`disabledDate`	禁用的日期，类型为 `Function` 时需返回日期对象、日期字符串或时间戳	`[String, Date, Number, Function, Array]`	`null`	`-`	`+1.0.0`
`endDate`	默认显示的月份日期，可以是月份中的任意一天，类型为 `Function` 时需返回日期对象、日期字符串或时间戳	`[String, Date, Number, Function]`	`当天`	`-`	`+1.0.0`
`firstDayOfWeek`	周起始日，`0~6`，`0` 表示周日，一次类推	`Number`	`0`	`-`	`+1.0.0`
`mode`	日期选择模式	`String`	`single`	`single、multiple、range`	`+1.0.0`
`switchMode`	切换器模式	`String`	`none`	`none、month、year-month`	`+1.0.0`
`title`	标题	`String`	`日历`	`-`	`+1.0.0`
`subtitle`	是否显示副标题	`Boolean`	`false`	`true`	`+1.0.0`
`formatSubtitle`	副标题格式化函数	`Function`	`null`	`-`	`+1.0.0`
`yearPrevIcon`	年份切换图标，同图标组件（Icon）的 `name` 属性，参考	`String`	`__zuo3`	`-`	`+1.0.0`
`yearNextIcon`	年份切换图标，同图标组件（Icon）的 `name` 属性，参考	`String`	`__you3`	`-`	`+1.0.0`
`monthPrevIcon`	月份切换图标，同图标组件（Icon）的 `name` 属性，参考	`String`	`__zuo2`	`-`	`+1.0.0`
`monthNextIcon`	月份切换图标，同图标组件（Icon）的 `name` 属性，参考	`String`	`__you2`	`-`	`+1.0.0`
`week`	周文本	`Array`	`["日", "一", "二", "三", "四", "五", "六"]`	`-`	`+1.0.0`
`watermark`	是否显示水印	`Boolean`	`true`	`false`	`+1.0.0`
`formatWatermark`	水印格式化函数	`Function`	`null`	`-`	`+1.0.0`
`formatMonthTitle`	月份标题格式化函数	`Function`	`null`	`true`	`+1.0.0`
`formatDay`	单个日期格式化函数	`Function`	`null`	`-`	`+1.0.0`
`poppable`	是否弹窗展示	`Boolean`	`true`	`false`	`+1.0.0`
`show`	显示状态	`Boolean`	`false`	`true`	`+1.0.0`
`close`	是否显示关闭按钮	`Boolean`	`true`	`false`	`+1.0.0`
`closeIcon`	关闭按钮图标，同图标组件（Icon）的 `name` 属性，参考	`String`	`__cuo`	`-`	`+1.0.0`
`overlay`	是否显示遮罩	`Boolean`	`true`	`false`	`+1.0.0`
`stopCloseOnClickOverlay`	点击遮罩不关闭	`Boolean`	`false`	`true`	`+1.0.0`
`footer`	是否显示`footer`	`Boolean`	`true`	`false`	`+1.0.0`
`btnClass`	底部按钮的自定义 `class`	`[String, Array, Object]`	`"pure-button-primary pure-button-block pure-button-round"`	`-`	`+1.0.0`
`btnText`	底部按钮文字	`String`	`确认`	`-`	`+1.0.0`
`btnOpts`	底部按钮的其他配置，参考	`Object`	`{}`	`-`	`+1.0.0`
`safeBottm`	安全底部	`Boolean`	`true`	`false`	`+1.0.0`
`readonly`	只读模式	`Boolean`	`false`	`true`	`+1.0.0`
`maxRange`	最多可选择的天数，`null` 或 `undefined` 时表示不限制	`Number`	`undefined`	`-`	`+1.0.0`
`cancelable`	单选时是否可以取消	`Boolean`	`false`	`true`	`+1.0.0`

Event

事件名	说明	回调参数	版本
`change`	选中日期变化事件	`Array[Day]: 选中的日期`	`+1.0.0`
`close`	弹窗关闭事件	`-`	`+1.0.0`
`confirm`	确认事件	`Array[Day]: 选中的日期`	`+1.0.0`
`outMaxRange`	超出最多可选天数事件	`-`	`+1.0.0`

Slots

名称	说明	参数	版本
`close`	关闭按钮	`-`	`+1.0.0`
`title`	标题	`-`	`+1.0.0`
`week`	周文本	`-`	`+1.0.0`
`footer`	底部 `Footer`	`-`	`+1.0.0`

日历 Calendar ​

重要提示 ​

兼容性 ​

插件市场地址 ​

基础使用 ​

切换器 ​

日期选择模式 ​

格式化水印 ​

格式化月标题 ​

自定义周文字 ​

副标题 ​

格式化日期 ​

数据格式 ​

副标题 ​

Month ​

Day ​

Props ​

Event ​

Slots ​

日历 Calendar

重要提示

兼容性

插件市场地址

基础使用

切换器

日期选择模式

格式化水印

格式化月标题

自定义周文字

副标题

格式化日期

数据格式

副标题

Month

Day

Props

Event

Slots