Calendar 日历

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="日历">
		<t-row class="dx">
			<t-image class="h.350-w.100%-r.0" src='/static/image/D2.jpg'></t-image>
			<template v-if="calendarDate!=null">
				<t-text class='s.40-ffwb-c.#fff-da-dlt.30'>星期{{weeks[calendarDate?.week as number]}}</t-text>
				<t-text class='ffwb-c.#fff-da-dl.30-dt.85'>{{calendarDate?.fullDate}}</t-text>
				<t-text
					class='ffwb-c.#fff-da-dl.30-dt.130'>{{calendarDate?.IMonthCn}}{{calendarDate?.IDayCn}}{{calendarDate?.astro}}</t-text>
				<t-text class='ffwb-c.#fff-da-dl.30-dt.175'>{{calendarDate?.gzYear}}年 {{calendarDate?.gzDay}}月
					{{calendarDate?.gzDay}}日</t-text>
			</template>
		</t-row>
		<t-calendar v-if="showCalender" :selected="selected" :viewMode="viewMode" :mode="selectMode"
			:showMonthBg="monthBg" :festival="festival" :vertical="vertical" :lunar="lunar" :startDate="startDate"
			:endDate="endDate" :monthShowCurrentMonth="monthShowCurrentMonth" :disabled="disabled"
			:disableTouch="disableTouch" v-model="dataValue" @click="calenderClick" @change="cleanderChange"
			ref="calendar"></t-calendar>
		<t-group title='组件配置' class="tdr-tdb">
			<t-section title="日历类型"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="modeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);" :checked="true">月日历
				</radio>
				<radio value="2" style="transform: scale(0.7);">周日历</radio>
			</radio-group>
			<t-section title="日历选择模式"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="selectModeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);" :checked="true">单选</radio>
				<radio value="2" style="transform: scale(0.7);">多选</radio>
				<radio value="3" style="transform: scale(0.7);">范围选择</radio>
			</radio-group>
			<t-section title="是否可选择"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="disabledModeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);">禁用</radio>
				<radio value="2" style="transform: scale(0.7);" :checked="true">不禁用</radio>
			</radio-group>
			<t-section title="日历滑动模式"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="verticalModeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);">横向</radio>
				<radio value="2" style="transform: scale(0.7);" :checked="true">纵向</radio>
				<radio value="3" style="transform: scale(0.7);" :checked="true">不滑动</radio>
			</radio-group>
			<t-section title="是否显示农历"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="lunarModeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);" :checked="true">是</radio>
				<radio value="2" style="transform: scale(0.7);">否</radio>
			</radio-group>
			<t-section title="是否显示节日"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="festivalModeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);" :checked="true">是</radio>
				<radio value="2" style="transform: scale(0.7);">否</radio>
			</radio-group>

			<t-section title="是否月份背景"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="monthBgModeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);" :checked="true">是</radio>
				<radio value="2" style="transform: scale(0.7);">否</radio>
			</radio-group>
			<t-section title="不显示禁用日期"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="showCurrentMonthChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);">是</radio>
				<radio value="2" style="transform: scale(0.7);" :checked="true">否</radio>
			</radio-group>
			<t-section title="限制日期选择范围"></t-section>
			<radio-group class="uni-flex uni-row radio-group" @change="rangeModeChange"
				style="display: flex;flex-direction: row;align-items: center;">
				<radio value="1" style="margin-right: 15px;transform: scale(0.7);">是</radio>
				<radio value="2" style="transform: scale(0.7);" :checked="true">否</radio>
			</radio-group>
		</t-group>
	</t-page>
</template>

<script>
	import { CalendarDateType } from "@/uni_modules/tui-plus"
	export default {
		data() {
			return {
				weeks: ['', '一', '二', '三', '四', '五', '六', '日'],
				calendarDate: null as CalendarDateType | null,
				dataValue: ['2024-8-1'] as Array<string>,
				isOpen: true,
				lunar: true,
				festival: true,
				viewMode: 'month',
				selectMode: 'single',
				vertical: true,
				showCalender: true,
				monthShowCurrentMonth: false,
				monthBg: true,
				startDate: "",
				endDate: "",
				disabled: false,
				disableTouch: false,
				selected: [
					{
						date: '2024-8-24',
						info: '打折',
						infoColor: '#00cc81',
						// topInfo: '一折',
						// topInfoColor: '#ff5500',
						badge: true,
						badgeInfo: '休',
						badgeColor: '#ff0000',
						disabled: true
					},
					{
						date: '2024-8-20',
						info: '爆满',
						// infoColor: '#ff0000',
						badge: true,
						badgeInfo: '',
						badgeColor: '#00cc81',
						disabled: true
					},
					{
						date: '2024-8-15',
						info: '已签到',
						infoColor: '#ff5500',
						badge: true,
						badgeInfo: '16',
						badgeColor: '#ff0000',
						disabled: false
					}
				]
			};
		},
		onReady() {
			setTimeout(() => {
				const calenda = this.$refs['calendar'] as ComponentPublicInstance
				calenda.$callMethod('gotoToday', '2024-8-15')
			}, 3000)
		},
		methods: {
			cleanderChange(date : string[]) {
				console.log(date)
			},
			calenderClick(date : CalendarDateType) {
				this.calendarDate = date
			},
			show() {
				this.showCalender = false
				this.$nextTick(() => {
					this.showCalender = true
				})
			},
			modeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				this.viewMode = val == '1' ? 'month' : 'week'
				this.show()
			},
			lunarModeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				this.lunar = val == '1' ? true : false
				this.show()
			},
			festivalModeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				this.festival = val == '1' ? true : false
				this.show()
			},
			monthBgModeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				this.monthBg = val == '1' ? true : false
				this.show()
			},
			rangeModeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				if (val == '1') {
					this.startDate = '2024-5-15'
					this.endDate = '2024-5-28'
				} else {
					this.startDate = ''
					this.endDate = ''
				}
				this.show()
			},

			showCurrentMonthChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				this.monthShowCurrentMonth = val == '1' ? true : false
				this.show()
			},
			verticalModeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				this.vertical = val == '1' ? false : true
				if (val == '3') {
					this.disableTouch = true
				} else {
					this.disableTouch = false
				}
				this.show()
			},
			disabledModeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				this.disabled = val == '1' ? true : false
				this.show()
			},
			selectModeChange(e : UniRadioGroupChangeEvent) {
				const val = e.detail.value
				switch (val) {
					case '1':
						this.selectMode = 'single'
						break;
					case '2':
						this.selectMode = 'multiple'
						break;
					case '3':
						this.selectMode = 'range'
						break;
					default:
						this.selectMode = 'single'
						break;
				}
				this.show()
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
hover	是否有鼠标悬停效果	Boolean	false	true, false
type	组件类型	String	'p'	-
modelValue	绑定值，用于双向数据绑定	String[]	[]	-
title	日历标题	String	'请选择日期'	-
activeBackgroundColor	选中日期的背景颜色	String	'#f56c6c'	-
mode	日期选择模式	String	'range'	-
viewMode	视图模式	String	'month'	'month', 'week'
disableTouch	是否禁用触摸事件	Boolean	false	true, false
vertical	是否垂直显示	Boolean	true	true, false
selected	已选日期	UTSJSONObject[]	[]	-
lunar	是否显示农历	Boolean	false	true, false
showMonthBg	是否显示月份背景	Boolean	false	true, false
monthShowCurrentMonth	是否仅显示当前月份	Boolean	false	true, false
festival	是否显示节日	Boolean	true	true, false
startDate	日期选择范围-开始日期	String	''	-
endDate	日期选择范围-结束日期	String	''	-

Events

事件名	描述	回调参数	版本
update:modelValue	绑定值更新时触发	-	-
click	点击日期时触发	-	-
change	日期改变时触发	-	-

Slots

名称	描述
default	默认插槽，用于自定义日历内容