Calendar 日历 1.0.4

手机扫码预览

23:59



---

组件名：rice-calendar

用于选择日期或日期区间，支持单选，多选，区间选择。APP端使用draw api 实现，是一个高性能的组件。注：1.0.4版本开始支持

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

单个日期

默认为单个日期选择

<rice-calendar v-model:show="showSingle" @confirm="signleConfirm"></rice-calendar>

<script setup lang="ts">
  const signleConfirm=(value:string)=>{}
</script>

单个日期

默认为单个日期选择
如需选中默认日期，可传date 参数，mode 为 single 时 date 格式为字符串
可以在 confirm 事件中获取到选中的日期，mode 为 single 时返回格式为字符串，mode 为multiple或range时为数组

<rice-calendar v-model:show="showSingle" @confirm="signleConfirm"></rice-calendar>

<script setup lang="ts">
  const signleConfirm=(value:string)=>{}
</script>

多个日期

mode 为 multiple 可选多个日期，此时 date 应该传递数组格式

<rice-calendar v-model:show="showMultiple" mode="multiple" :date="dateMultiple"
			@confirm="multipleConfirm"></rice-calendar>

<script setup lang="ts">
  const dateMultiple = ref(["2025-9-02", '2025-09-12'])
  const multipleConfirm=(value:string[])=>{}
</script>

选择日期区间

mode 为 range 可选日期区间，此时 date 应该传递数组格式，数组有两个日期，第一个日期为开始日期，第二个日期为结束日期

<rice-calendar v-model:show="showRange" mode="range" :date="dateRange" @confirm="rangeConfirm"></rice-calendar>

<script setup>
  const dateRange = ref<string[]>(["2025-9-03", "2025-9-20"])
  const rangeConfirm = (e : string[]) => {}
</script>

自定义颜色

通过 color 可以自定义主题颜色，包括选中状态和底部按钮的颜色

<rice-calendar v-model:show="showColor" color="#f56c6c" mode="range" :date="dateRange"></rice-calendar>

API

Props

属性名	类型	说明	默认值
v-model:show/show	Boolean	是否显示	-
mode	String	选择类型，可选值：single、multiple、range	single
date	String|String[]	默认选中的时间,mode 为multiple或range时为数组,mode 为 single 为字符串，传空字符串为不选择	-
switch-mode 1.0.5	String	切换模式，可选值：none、month、year-month	year-month
min-date	String	可选的最小日期，如 2025-01-01	-
max-date	String	可选的最大日期，如 2026-12-31	-
lunar	Boolean	是否显示农历	-
title	String	日历标题	-
show-title	Boolean	是否显示标题	-
color	String	选中日期和底部按钮的颜色	-
formatter	(day : CalendarData) => CalendarData	日期格式化函数 ，CalendarData 格式见下类型定义	-
show-subtitle 1.0.5	Boolean	是否显示日历副标题（年月）	-
show-confirm-btn	Boolean	是否显示底部的确认按钮	-
confirm-text	String	确认按钮的文字，默认确认	-
confirm-disabled-text	String	确认按钮处于禁用状态时的文字	-
max-range	Number	最大可选天数,mode 为 multiple 或 range 时有效	-
range-prompt	String	超出最大可选天数的提示文案 默认 为 最多选择xx天,mode 为 multiple 或 range 时有效	-
show-range-prompt	Boolean	超出最大可选天数时，是否显示提示文字，默认true,mode 为 multiple 或 range 时有效	-
allow-same-day	Boolean	是否允许日期范围的起止时间为同一天，mode = range时有效	-
readonly	Boolean	是否为只读状态	-
first-day-of-week	Number	设置周起始日,1-7，1表示星期一，以此类推，7表示星期天	1
use-popup	Boolean	是否以弹窗的形式展示日历，默认true	true
close-on-click-overlay	Boolean	点击遮罩是否关闭	true
safe-area-inset-bottom	Boolean	是否开启底部安全区	-
z-index	Number	zIndex 层级	999
closeable1.0.9	Boolean	是否显示关闭按钮级	true
close-icon 1.0.9	String	关闭图标的name值级	cross
close-on-click-close 1.0.9	Boolean	点击关闭按钮是否关闭popup级	true
custom-style	Object	自定义style	-

Events

事件名	说明	回调参数
select 1.0.5	点击并选中任意日期时触发	(value:string
confirm	日期选择完成后触发，若 show-confirm 为 true，则点击确认按钮后触发	-
unselect	当日历组件的 mode 为 multiple 时，取消选中日期时触发	(value:string)
clickDisabledDate	点击禁用的日期时触发	(value:string)
overRange	选择超出最多可选天数时触发	-
clickClose1.0.9	点击关闭按钮时触发	-
open	打开时触发	-
close	关闭时触发	-
opened	打开动画结束时触发	-
closed	关闭动画结束时触发	-

类型定义

组件导出如下类型

type CalendarData = {
	fullDate : string,
	year : number,
	month : number,
	date : number,
	day : number, //星期 1-7
	lunarInfo ?: LunarInfoType,
	isToday : boolean,
	text ?: string, //显示的文字，会替换 date 日期
	topInfo ?: string, // 顶部文案
	topInfoColor ?: string, //顶部文案颜色
	bottomInfo ?: string, //底部文案
	bottomInfoColor ?: string, //底部文案颜色
	disabled ?: boolean,
}

type CalendarFormatter = (day : CalendarData) => CalendarData
type CalendarMode = 'single' | 'multiple' | 'range'
type CalendarSwitchMode = 'month' | 'year-month' | 'none'

组件类型

// 组件类型
const calendarRef = ref<RiceCalendarComponentPublicInstance | null>(null)