uView Next 4.0

# Calendar 日历

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

注意： 此组件与Picker 选择器的日期选择模式有一定的重合之处，区别在于本组件为更专业的日期选择场景，能选择日期范围等。 另外Picker组件的日期模式可以配置更多的参数，如时、分、秒等，可以根据不同的使用场景进行选择。

# 基本使用

  • 通过show绑定一个布尔变量用于打开或收起日历弹窗
  • 通过mode参数指定选择日期模式，包含单选/多选/范围选择
<template>
	<view>
		<un-calendar :show="show"></un-calendar>
		<un-button @click="show = true">打开</un-button>
	</view>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(false);
</script>

✅ Copy success!

# 日历模式

  • mode为single只能选择单个日期
  • mode为multiple可以选择多个日期
  • mode为range可以选择日期范围

# 单个日期模式

选择日期后，需要点击底部的确定按钮才能触发回调事件，回调参数为一个数组，有如下属性：

["2021-07-01"]

✅ Copy success!

示例代码：

<template>
	<un-calendar :show="show" :mode="mode" @confirm="confirm"></un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(true);
const mode = ref('single');

function confirm(e: string[]): void {
	console.log(e);
}
</script>

✅ Copy success!

# 多个日期模式

选择日期后，需要点击底部的确定按钮才能触发回调事件，回调参数为一个数组，有如下属性：

["2021-07-27", "2021-07-29", "2021-07-30"]

✅ Copy success!

示例代码：

<template>
	<un-calendar :show="show" :mode="mode" @confirm="confirm"></un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(true);
const mode = ref('multiple');

function confirm(e: string[]): void {
	console.log(e);
}
</script>

✅ Copy success!

# 日期范围模式

此模式用于选择一个日期范围，比如住酒店的入住到离店的日期范围。

此模式的返回参数如下：

["2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31"]

✅ Copy success!

示例代码：

<template>
	<un-calendar :show="show" :mode="mode" @confirm="confirm"></un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(true);
const mode = ref('range');

function confirm(e: string[]): void {
	console.log(e);
}
</script>

✅ Copy success!

# 插入模式

un-calendar-view组件可以直接插入到页面中，无需弹窗模式。

<template>
	<un-calendar-view @change="change"></un-calendar-view>
</template>

<script setup lang="uts">
function change(e: string[]): void {
	console.log(e);
}
</script>

✅ Copy success!

# 自定义主题颜色

组件可传入color参数，更改组件主题色。

示例代码：

<template>
	<un-calendar :show="show" 
    color="#f56c6c" :mode="mode" @confirm="confirm"></un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(true);
const mode = ref('range');

function confirm(e: string[]): void {
	console.log(e);
}
</script>

✅ Copy success!

# 自定义文案

组件可以通过formatter以函数的方式定义日期文案。

注意：

微信小程序不支持通过props传递函数参数，所以组件内部暴露了一个setFormatter方法用于设置格式化方法，注意在页面的onReady生命周期获取ref再操作。

<template>
	<un-calendar 
        startText="住店"
        endText="离店"
        confirmDisabledText="请选择离店日期"
        :formatter="formatter"
        :show="show" 
        :mode="mode" 
        @confirm="confirm"
		ref="calendar"
	>
    </un-calendar>
</template>

<script setup lang="uts">
import { ref, onReady } from 'vue';

// 类型定义
interface DayType {
	month: number;
	day: number;
	bottomInfo?: string;
	dot?: boolean;
}

const show = ref(true);
const mode = ref('range');
const calendar = ref(null);

function confirm(e: string[]): void {
	console.log(e);
}

function formatter(day: DayType): DayType {
	const d = new Date();
	const month = d.getMonth() + 1;
	const date = d.getDate();
	
	if (day.month == month && day.day == date + 3) {
		day.bottomInfo = '有优惠';
		day.dot = true;
	}
	return day;
}

// 微信小程序兼容性处理
onReady(() => {
	// 如果需要兼容微信小程序的话，需要用此写法
	// calendar.value?.setFormatter(formatter);
});
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

✅ Copy success!

# 日期最大范围

组件可以通过maxDate定义最大可选日期。

<template>
	<un-calendar 
        :maxDate="maxDate"
        :show="show" 
        @confirm="confirm">
	</un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const d = new Date();
const year = d.getFullYear();
let month = (d.getMonth() + 1).toString();
month = month.length < 2 ? `0${month}` : month;
const date = d.getDate();

const show = ref(true);
const maxDate = ref(`${year}-${month}-${date + 10}`);

function confirm(e: string[]): void {
	console.log(e);
}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

✅ Copy success!

# 是否显示农历

组件可以通过showLunar定义是否显示农历。

<template>
	<un-calendar 
        showLunar
        :show="show" 
        @confirm="confirm">
	</un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(true);

function confirm(e: string[]): void {
	console.log(e);
}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

✅ Copy success!

# 默认日期

组件可以通过defaultDate定义默认日期。

<template>
	<un-calendar 
        :defaultDate="defaultDateMultiple"
        :show="show" 
        mode="multiple"
        @confirm="confirm">
	</un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const d = new Date();
const year = d.getFullYear();
let month = (d.getMonth() + 1).toString();
month = month.length < 2 ? `0${month}` : month;
const date = d.getDate();

const show = ref(true);
const defaultDateMultiple = ref([
	`${year}-${month}-${date}`,
	`${year}-${month}-${date + 1}`,
	`${year}-${month}-${date + 2}`
]);

function confirm(e: string[]): void {
	console.log(e);
}
</script>

<style lang="scss" scoped>
	.title{
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>

✅ Copy success!

# 禁止选择日期

组件可以通过disabledDate定义禁止被选择的日期。

<template>
	<un-calendar 
        :disabledDate="disabledDate"
        :show="show" 
        @confirm="confirm">
	</un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(true);
const disabledDate = ref(['2025-07-01', "2025-07-02"]);
// 也可以使用字符串形式：disabledDate: '2025-07-01'

function confirm(e: string[]): void {
	console.log(e);
}
</script>

✅ Copy success!

也可以通过disabledFun函数更灵活的设置禁止被选择的日期。

<template>
	<un-calendar 
        :disabledFun="disabledFun"
        :show="show" 
        @confirm="confirm">
	</un-calendar>
</template>

<script setup lang="uts">
import { ref } from 'vue';

const show = ref(true);

function disabledFun(date: Date): [boolean, string] | false {
	if (date.getDay() == 0) {
		// return true;
		return [true, '已过期'];
	}
	return false;
}

function confirm(e: string[]): void {
	console.log(e);
}
</script>

✅ Copy success!

# API

# Props

参数 说明 类型 默认值 可选值
show 是否显示日历弹窗 Boolean false true
title 标题内容 String 日期选择 -
showTitle 是否显示标题 Boolean true false
showSubtitle 是否显示副标题 Boolean true false
closeOnClickOverlay 是否允许点击遮罩关闭日历 Boolean true false
mode 日期类型选择 String single multiple-可以选择多个日期，range-选择日期范围
shape 选中的日期的形状 String square circle-圆形，square-带圆角
startText mode=range时，第一个日期底部的提示文字 String 开始 -
endText mode=range时，最后一个日期底部的提示文字 String 结束 -
color 主题色，对底部按钮和选中日期有效 String #3c9cff -
minDate 最小的可选日期 Number | String 0 -
maxDate 最大可选日期 Number | String 0 -
defaultDate 默认选中的日期，mode为multiple或range是必须为数组格式 Array | String | Date null -
maxCount mode=multiple时，最多可选多少个日期 Number | String Number.MAX_SAFE_INTEGER -
rowHeight 日期行高 Number | String 56 -
formatter 日期格式化函数 Function null -
showLunar 是否显示农历 Boolean false true
showMark 是否显示月份背景色 Boolean true false
readonly 是否为只读状态，只读状态下禁止选择日期 Boolean false true
maxRange 日期区间最多可选天数，默认无限制，mode = range时有效 Number | String 无限制 -
rangePrompt 范围选择超过最多可选天数时的提示文案，mode = range时有效 String 选择天数不能超过 xx 天 -
showRangePrompt 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 Boolean true false
monthNum 最多展示月份数量 Number | String 3 -
allowSameDay 是否允许日期范围的起止时间为同一天，mode = range时有效 Boolean false true
disabledDate 禁止选择的日期 Array | String - -
disabledFun 禁止选择的日期函数 Function - -
weekdays 星期几 String - -
buttonDisabled 是否禁用底部按钮 Boolean false true
showConfirm 是否显示确认按钮 Boolean true false
round 圆角值 String | Number 0 -
confirmText 确认按钮文字 String 确定 -
confirmDisabledText 确认按钮禁用时的文字 String 确定 -

# Event

事件名 说明 回调参数
confirm 仅弹窗模式下有效，日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发 选择日期相关的返回参数
change 仅插入模式下有效，选择日期时触发 （仅calendar-view有效） 选择日期相关的返回参数
close 日历关闭时触发 可定义页面关闭时的回调事件
上次更新时间: 2025/10/28 21:19:58

← Cascader 级联选择器 →

当前文档拷贝至3.x版本，尚不完善，我们正在努力完善中，欢迎您的反馈和参与改进。
×