DatetimePicker 日期时间选择器

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="DatetimePicker日期时间选择">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 24rpx 0" text="基础用法" />
			<zk-cell title="年月日" :value="formatDate(parseDate(dateValue))" @click="showPicker('date')" />
			<zk-cell title="年月" :value="formatYearMonth(parseDate(yearMonthValue))" @click="showPicker('year-month')" />
			<zk-cell title="时间选择" :value="formatTime(parseDate(timeValue))" @click="showPicker('time')" />
		</zk-theme>

		<!-- 进阶用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="primary" :size="32" weight="bold" margin="0 0 24rpx 0" text="进阶用法" />
			<zk-cell title="完整日期时间" :value="formatDateTime(parseDate(datetimeValue))" @click="showPicker('datetime')" />
			<zk-cell title="限制范围" :value="formatDate(parseDate(rangeValue))" @click="showPicker('range')"
				label="仅可选择最近一年" />
			<zk-cell title="自定义格式化" :value="formatCustom(parseDate(customValue))" @click="showPicker('custom')" />
		</zk-theme>

		<!-- 选择器组件 -->
		<zk-datetime-picker :show="dateShow" type="date" title="选择日期" :value="dateValue" @input="dateShow = $event"
			@confirm="onDateConfirm" @cancel="dateShow = false" />

		<zk-datetime-picker :show="yearMonthShow" type="year-month" title="选择年月" :value="yearMonthValue"
			@input="yearMonthShow = $event" @confirm="onYearMonthConfirm" @cancel="yearMonthShow = false" />

		<zk-datetime-picker :show="timeShow" type="time" title="选择时间" :value="timeValue" @input="timeShow = $event"
			@confirm="onTimeConfirm" @cancel="timeShow = false" />

		<zk-datetime-picker :show="datetimeShow" type="datetime" title="选择日期时间" :value="datetimeValue"
			@input="datetimeShow = $event" @confirm="onDatetimeConfirm" @cancel="datetimeShow = false" />

		<zk-datetime-picker :show="rangeShow" type="date" title="选择日期" :value="rangeValue" :min-date="minDate"
			:max-date="maxDate" @input="rangeShow = $event" @confirm="onRangeConfirm" @cancel="rangeShow = false" />

		<zk-datetime-picker :show="customShow" type="date" title="自定义格式化" :value="customValue"
			:formatter="customFormatter" @input="customShow = $event" @confirm="onCustomConfirm"
			@cancel="customShow = false" />
	</zk-theme>
</template>


<script>
	export default {
		data() {
			const now = Date.now()
			return {
				// 显示状态
				dateShow: false,
				yearMonthShow: false,
				timeShow: false,
				datetimeShow: false,
				rangeShow: false,
				customShow: false,

				// 选中值
				dateValue: now,
				yearMonthValue: now,
				timeValue: now,
				datetimeValue: now,
				rangeValue: now,
				customValue: now,

				// 范围限制（前后6个月）
				minDate: now - 180 * 24 * 60 * 60 * 1000,
				maxDate: now + 180 * 24 * 60 * 60 * 1000
			}
		},

		methods: {
			// 显示选择器
			showPicker(type) {
				switch (type) {
					case 'date':
						this.dateShow = true
						break
					case 'year-month':
						this.yearMonthShow = true
						break
					case 'time':
						this.timeShow = true
						break
					case 'datetime':
						this.datetimeShow = true
						break
					case 'range':
						this.rangeShow = true
						break
					case 'custom':
						this.customShow = true
						break
				}
			},

			// 解析日期
			parseDate(value) {
				if (!value) return new Date()
				return new Date(value)
			},

			// 格式化方法
			formatDate(date) {
				if (!date) return ''
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				return `${year}-${month}-${day}`
			},

			formatYearMonth(date) {
				if (!date) return ''
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				return `${year}年${month}月`
			},

			formatTime(date) {
				if (!date) return ''
				const hours = date.getHours().toString().padStart(2, '0')
				const minutes = date.getMinutes().toString().padStart(2, '0')
				return `${hours}:${minutes}`
			},

			formatDateTime(date) {
				if (!date) return ''
				return `${this.formatDate(date)} ${this.formatTime(date)}`
			},

			formatCustom(date) {
				if (!date) return ''
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}年${month}月${day}日`
			},

			// 自定义格式化函数
			customFormatter(type, value) {
				if (type === 'year') return `${value}年`
				if (type === 'month') return `${value}月`
				if (type === 'day') return `${value}日`
				if (type === 'hour') return `${value}时`
				if (type === 'minute') return `${value}分`
				return value
			},

			// 确认事件处理
			onDateConfirm(date) {
				this.dateValue = date.getTime()
				uni.showToast({
					title: `选择日期：${this.formatDate(date)}`,
					icon: 'none'
				})
			},

			onYearMonthConfirm(date) {
				this.yearMonthValue = date.getTime()
				uni.showToast({
					title: `选择年月：${this.formatYearMonth(date)}`,
					icon: 'none'
				})
			},

			onTimeConfirm(date) {
				this.timeValue = date.getTime()
				uni.showToast({
					title: `选择时间：${this.formatTime(date)}`,
					icon: 'none'
				})
			},

			onDatetimeConfirm(date) {
				this.datetimeValue = date.getTime()
				uni.showToast({
					title: `选择日期时间：${this.formatDateTime(date)}`,
					icon: 'none'
				})
			},

			onRangeConfirm(date) {
				this.rangeValue = date.getTime()
				uni.showToast({
					title: `选择日期：${this.formatDate(date)}`,
					icon: 'none'
				})
			},

			onCustomConfirm(date) {
				this.customValue = date.getTime()
				uni.showToast({
					title: `选择日期：${this.formatCustom(date)}`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-NVUE */
	.zk-cell {
		width: 662rpx;
	}

	/* #endif */
</style>