Calendar 日历

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Calendar日历">
		<!-- 基础用法 -->

		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
			<zk-cell title="选择单个日期" :value="singleDate || '请选择'" is-link @click="showSingle = true" />
			<zk-cell title="选择多个日期" :value="multipleText" is-link @click="showMultiple = true" />
			<zk-cell title="选择日期范围" :value="rangeText" is-link @click="showRange = true" />
		</zk-theme>

		<!-- 自定义主题 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义主题" align="center" />
			<zk-cell title="自定义颜色" :value="customDate || '请选择'" is-link @click="showCustom = true" />
			<zk-cell title="显示农历" :value="lunarDate || '请选择'" is-link @click="showLunar = true" />
			<zk-cell title="自定义日期范围" :value="limitText" is-link @click="showLimit = true" />
		</zk-theme>

		<!-- 日历组件 -->
		<!-- 单选 -->
		<zk-calendar :show="showSingle" mode="single" :default-date="defaultDate" @update:show="showSingle = $event"
			@confirm="onSingleConfirm" />

		<!-- 多选 -->
		<zk-calendar :show="showMultiple" mode="multiple" @update:show="showMultiple = $event"
			@confirm="onMultipleConfirm" />

		<!-- 范围选择 -->
		<zk-calendar :show="showRange" mode="range" start-text="入住" end-text="离店" @update:show="showRange = $event"
			@confirm="onRangeConfirm" />

		<!-- 自定义颜色	textColor: '#ffffff', -->
		<zk-calendar :show="showCustom" :color="{
				backgroundColor: 'red',
			 
				rangeColor: 'rgba(139, 92, 246, 0.1)',
				buttonColor: 'red'
			}" @confirm="onCustomConfirm" @update:show="showCustom = $event" />

		<!-- 显示农历 -->
		<zk-calendar :show="showLunar" mode="single" :show-lunar="true" @update:show="showLunar = $event"
			@confirm="onLunarConfirm" />

		<!-- 日期限制 -->
		<zk-calendar :show="showLimit" mode="range" :min-date="minDate" :max-date="maxDate"
			@update:show="showLimit = $event" @confirm="onLimitConfirm" />
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				// 显示控制
				showSingle: false,
				showMultiple: false,
				showRange: false,
				showCustom: false,
				showLunar: false,
				showLimit: false,

				// 选中的日期
				defaultDate: new Date(), // 默认选中今天
				singleDate: '',
				multipleDates: [],
				rangeDate: [],
				customDate: '',
				lunarDate: '',
				limitDate: [],

				// 日期限制
				minDate: this.getDate(-30), // 当前日期前30天
				maxDate: this.getDate(30), // 当前日期后30天
			}
		},

		computed: {
			// 多选文本
			multipleText() {
				return this.multipleDates.length ? `已选择 ${this.multipleDates.length} 个日期` : '请选择'
			},
			// 范围选择文本
			rangeText() {
				const {
					rangeDate
				} = this
				if (!rangeDate.length) return '请选择'
				return `${rangeDate[0]} 至 ${rangeDate[1]}`
			},
			// 日期限制文本
			limitText() {
				const {
					limitDate
				} = this
				if (!limitDate.length) return '请选择'
				return `${limitDate[0]} 至 ${limitDate[1]}`
			}
		},

		methods: {
			// 获取日期
			getDate(days) {
				const date = new Date()
				date.setDate(date.getDate() + days)
				return date
			},

			// 单选确认
			onSingleConfirm(date) {
				this.singleDate = date[0]
			},

			// 多选确认
			onMultipleConfirm(dates) {
				this.multipleDates = dates
			},

			// 范围选择确认
			onRangeConfirm(dates) {
				this.rangeDate = dates
			},

			// 自定义颜色确认
			onCustomConfirm(date) {
				this.customDate = date[0]
			},

			// 农历确认
			onLunarConfirm(date) {
				this.lunarDate = date[0]
			},

			// 日期限制确认
			onLimitConfirm(dates) {
				this.limitDate = dates
			}
		}
	}
</script>
<style>

</style>