Calendar 日历

19:21

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

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

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

通过v-model绑定一个布尔变量用于打开或收起日历弹窗。
通过mode参数指定选择单个日期，还是选择日期范围。

html

<template>
	<view>
		<u-calendar v-model="show" :mode="mode"></u-calendar>
		<u-button @click="show = true">打开</u-button>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { CalendarMode } from 'uview-pro/types/global'

const show = ref(false)
const mode = ref<CalendarMode>('date')

</script>

日历模式

mode为date只能选择单个日期
mode为range可以选择日期范围

单个日期模式

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

{
	day: 4, // 选择了哪一天
	days: 30, // 这个月份有多少天
	isToday: true, // 选择的日期是否今天
	month: 6, // 选择的月份
	result: "2020-06-04", // 选择的日期整体值
	week: "星期四", // 选择日期所属的星期数
	year: 2020 , // 选择的年份
}

示例代码：

html

<template>
	<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
</template>

<script setup>
import { ref } from 'vue'
import type { CalendarChangeDate, CalendarChangeRange, CalendarMode } from 'uview-pro/types/global'

const show = ref(true)
const mode = ref<CalendarMode>('date')

function change(e: CalendarChangeRange | CalendarChangeDate) { 
	console.log(e)
}
</script>

日期范围模式

此模式用于选择一个日期范围，比如住酒店的入住到离店的日期范围，有如下可配置的参数：

active-bg-color参数配置起始/结束日期按钮的背景色
active-color参数配置起始/结束日期按钮的字体颜色
range-bg-color参数配置起始/结束日期之间的区域的背景颜色，默认为rgba(41,121,255,0.13)，为浅蓝色
start-text参数用于设置起始日期底部的提示文字，如"住店"
end-text参数用于设置结束日期底部的提示文字，如"离店"

此模式的返回参数如下：

{
	endDate: "2020-06-04", // 选择的结束日期
	endDay: 4, // 结束日期是哪一天
	endMonth: 6, // 结束日期的月份
	endWeek: "星期四", // 结束日期的星期数
	endYear: 2020, // 结束日期的年份
	startDate: "2020-06-01", // 选择的起始日期
	startDay: 1, // 起始日期是哪一天
	startMonth: 6, // 起始日期的月份
	startWeek: "星期一", // 起始日期的星期数
	startYear: 2020 // 起始日期的年份
}

示例代码：

html

<template>
	<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
</template>

<script setup>
import { ref } from 'vue'
import type { CalendarChangeDate, CalendarChangeRange, CalendarMode } from 'uview-pro/types/global'

const show = ref(true)
const mode = ref<CalendarMode>('range')

function change(e: CalendarChangeRange | CalendarChangeDate) { 
	console.log(e)
}
</script>

显示农历模式 v0.2.1+

支持农历选择和回调，配置的参数：

show-lunar是否显示农历

单个日期模式的返回参数如下：

{
	day: 4, // 选择了哪一天
	days: 30, // 这个月份有多少天
	isToday: true, // 选择的日期是否今天
	month: 6, // 选择的月份
	result: "2020-06-04", // 选择的日期整体值
	week: "星期四", // 选择日期所属的星期数
	year: 2020 , // 选择的年份
	lunar: { 
		dayCn: '十三', // 农历的日
        monthCn: '四月', // 农历的月
		weekCn: "星期四", // 选择日期所属的星期数
        day: '13', // 农历的日
        month: '4', // 农历的月
		week: 4, // 选择日期所属的星期数
        year: 2020 // 农历的年份
	},
}

日期范围模式的返回参数如下：

{
	endDate: "2020-06-04", // 选择的结束日期
	endDay: 4, // 结束日期是哪一天
	endMonth: 6, // 结束日期的月份
	endWeek: "星期四", // 结束日期的星期数
	endYear: 2020, // 结束日期的年份
	startDate: "2020-06-01", // 选择的起始日期
	startDay: 1, // 起始日期是哪一天
	startMonth: 6, // 起始日期的月份
	startWeek: "星期一", // 起始日期的星期数
	startYear: 2020, // 起始日期的年份
	startLunar: { 
		dayCn: '初十',
        monthCn: '四月',
		weekCn: "星期一",
        day: '13',
        month: '4',
		week: 1,
        year: 2020
	},
	endLunar: { 
		dayCn: '十三',
        monthCn: '四月',
		weekCn: "星期四",
        day: '13',
        month: '4',
		week: 4,
        year: 2020
	},
}

示例代码：

html

<template>
	<view>
		<u-calendar v-model="show" :mode="mode" :show-lunar="showLunar" @change="change"></u-calendar>
		<view>{{ result }}</view>
		<view>{{ lunarResult }}</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import type { CalendarChangeDate, CalendarChangeRange, CalendarMode } from 'uview-pro/types/global'

const show = ref(true)
const result = ref('')
const lunarResult = ref('')
const mode = ref<CalendarMode>('date')
const showLunar = ref(true)


function change(e: CalendarChangeRange | CalendarChangeDate) {
    if (mode.value === 'range') {
        const range = e as CalendarChangeRange;
        result.value = range.startDate + ' - ' + range.endDate;
        if (showLunar.value && range.startLunar && range.endLunar) {
            lunarResult.value = `${range.startLunar.monthCn ?? ''}${range.startLunar.dayCn ?? ''}` + ' - ' + `${range.endLunar.monthCn ?? ''}${range.endLunar.dayCn ?? ''}`;
        } else {
            lunarResult.value = '';
        }
    } else {
        const single = e as CalendarChangeDate;
        result.value = single.result;
        if (showLunar.value && single.lunar) {
            lunarResult.value = `${single.lunar.monthCn ?? ''}${single.lunar.dayCn ?? ''}`;
        } else {
            lunarResult.value = '';
        }
    }
}
</script>

自定义内容

组件有一个默认插槽，名为tooltip，传入的内容将会显示在键盘的顶部位置，如使用，需要为传入的内容自定义样式。

html

<template>
	<u-calendar v-model="show" :mode="mode" @change="change">
		<template #tooltip>
			<view class="title">
				请选择住店/离店时间
			</view>
		</template>
	</u-calendar>
</template>

<script setup>
import { ref } from 'vue'
import type { CalendarChangeDate, CalendarChangeRange, CalendarMode } from 'uview-pro/types/global'

const show = ref(true)
const mode = ref<CalendarMode>('range')

function change(e: CalendarChangeRange | CalendarChangeDate) { 
	console.log(e)
}
</script>

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

API

Props

参数	说明	类型	默认值	可选值
mode	选择日期的模式，date-为单个日期，range-为选择日期范围	String	date	range
v-model	布尔值变量，用于控制日历的弹出与收起	Boolean	false	true
show-lunar v0.2.1+	是否显示农历	Boolean	false	true
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	false	true
change-year	是否显示顶部的切换年份方向的按钮	Boolean	true	false
change-month	是否显示顶部的切换月份方向的按钮	Boolean	true	false
max-year	可切换的最大年份	Number \| String	2050	-
min-year	可切换的最小年份	Number \| String	1950	-
min-date	最小可选日期	Number \| String	1950-01-01	-
max-date	最大可选日期	Number \| String	当前日期	-
border-radius	弹窗顶部左右两边的圆角值，单位rpx	Number \| String	20	-
mask-close-able	是否允许通过点击遮罩关闭日历	Boolean	true	false
month-arrow-color	月份切换按钮箭头颜色	String	#606266	-
year-arrow-color	年份切换按钮箭头颜色	String	#909399	-
color	日期字体的默认颜色	String	#303133	-
active-bg-color	起始/结束日期按钮的背景色	String	#2979ff	-
z-index	弹出时的`z-index`值	String \| Number	10075	-
active-color	起始/结束日期按钮的字体颜色	String	#ffffff	-
range-bg-color	起始/结束日期之间的区域的背景颜色	String	rgba(41,121,255,0.13)	-
range-color	选择范围内字体颜色	String	#2979ff	-
start-text	起始日期底部的提示文字	String	开始	-
end-text	结束日期底部的提示文字	String	结束	-
btn-type	底部确定按钮的主题	String	primary	default / success / info/ warning / error
toolTip	顶部提示文字，如设置名为`tooltip`的`slot`，此参数将失效	String	选择日期	-
closeable	是否显示右上角的关闭图标	Boolean	true	false

Slot

名称	说明
tooltip	自定义日历顶部的内容

Event

事件名	说明	回调参数
change	点击右上角`确定`按钮时触发	选择日期相关的返回参数

Calendar 日历 ​

平台差异说明 ​

基本使用 ​

日历模式 ​

单个日期模式 ​

日期范围模式 ​

显示农历模式 v0.2.1+ ​

自定义内容 ​

API ​

Props ​

Slot ​

Event ​

Calendar 日历

平台差异说明

基本使用

日历模式

单个日期模式

日期范围模式

显示农历模式 v0.2.1+

自定义内容

API

Props

Slot

Event