uview-ultra 4.5.46

package/components/up-datetime-picker/up-datetime-picker.uvue

@@ -0,0 +1,960 @@
+<template>
+    <view class="up-datetime-picker">
+        <view v-if="hasInput" class="up-datetime-picker__has-input"
+			@click="changeShow"
+        >
+            <up-input
+                :placeholder="placeholder"
+                :readonly="!!showByClickInput"
+                border="surround"
+                v-model="inputValue"
+            ></up-input>
+        </view>
+        <up-picker
+            ref="picker"
+            :show="pageInline || show || (hasInput && showByClickInput)"
+            :pageInline="pageInline"
+            :popupMode="popupMode"
+            :closeOnClickOverlay="closeOnClickOverlay"
+            :columns="columns"
+            :title="title"
+            :itemHeight="itemHeight"
+            :showToolbar="showToolbar"
+            :visibleItemCount="visibleItemCount"
+            :defaultIndex="innerDefaultIndex"
+            :cancelText="cancelText"
+            :confirmText="confirmText"
+            :cancelColor="cancelColor"
+            :confirmColor="confirmColor"
+            :toolbarRightSlot="toolbarRightSlot"
+            @close="close"
+            @closed="closedHandler"
+            @cancel="cancel"
+            @confirm="confirm"
+            @change="change"
+        >
+            <template #toolbar-right>
+                <slot name="toolbar-right">
+                </slot>
+            </template>
+            <template #toolbar-bottom>
+                <slot name="toolbar-bottom">
+                </slot>
+            </template>
+        </up-picker>
+    </view>
+</template>
+
+<script setup lang="uts">
+	defineOptions({
+		styleIsolation: 'app-and-page'
+	})
+
+	// 导入ref
+	import type { PropType } from 'vue'
+	import { ref, watch, nextTick, onMounted } from 'vue';
+	import {dayuts} from '@/uni_modules/lime-dayuts';
+	import { range, error, padZero, timeFormat } from '../../libs/function/index.uts';
+	import { date as testDate } from '../../libs/function/test.uts';
+	import defProps from './datetimePicker.uts';
+
+	// props
+	const props = defineProps({
+		hasInput: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.hasInput')
+		},
+		placeholder: {
+			type: String,
+			default: defProps.getString('datetimePicker.placeholder')
+		},
+		format: {
+			type: String,
+			default: defProps.getString('datetimePicker.format')
+		},
+		show: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.show')
+		},
+		pageInline: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.pageInline')
+		},
+		popupMode: {
+			type: String,
+			default: defProps.getString('datetimePicker.popupMode')
+		},
+		showToolbar: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.showToolbar')
+		},
+		toolbarRightSlot: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.toolbarRightSlot')
+		},
+		modelValue: {
+			type: [String, Number],
+			default: defProps.getString('datetimePicker.value')
+		},
+		title: {
+			type: String,
+			default: defProps.getString('datetimePicker.title')
+		},
+		mode: {
+			type: String,
+			default: defProps.getString('datetimePicker.mode')
+		},
+		maxDate: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.maxDate')
+		},
+		minDate: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.minDate')
+		},
+		minHour: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.minHour')
+		},
+		maxHour: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.maxHour')
+		},
+		minMinute: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.minMinute')
+		},
+		maxMinute: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.maxMinute')
+		},
+		minSecond: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.minSecond')
+		},
+		maxSecond: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.maxSecond')
+		},
+		filter: {
+			type: Function,
+			default: null
+		},
+		formatter: {
+			type: Function,
+			default: null
+		},
+		loading: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.loading')
+		},
+		itemHeight: {
+			type: [String, Number],
+			default: defProps.getNumber('datetimePicker.itemHeight')
+		},
+		cancelText: {
+			type: String,
+			default: defProps.getString('datetimePicker.cancelText')
+		},
+		confirmText: {
+			type: String,
+			default: defProps.getString('datetimePicker.confirmText')
+		},
+		cancelColor: {
+			type: String,
+			default: defProps.getString('datetimePicker.cancelColor')
+		},
+		confirmColor: {
+			type: String,
+			default: defProps.getString('datetimePicker.confirmColor')
+		},
+		visibleItemCount: {
+			type: [String, Number],
+			default: defProps.getNumber('datetimePicker.visibleItemCount')
+		},
+		closeOnClickOverlay: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.closeOnClickOverlay')
+		},
+		defaultIndex: {
+			type: Array as PropType<number[]>,
+			default: () : Array<number> => {
+				return defProps.getArray<number>('datetimePicker.defaultIndex')!
+			}
+		}
+	});
+
+	// emits
+	const emit = defineEmits(['close', 'closed', 'cancel', 'confirm', 'change', 'update:modelValue']);
+	
+	// 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
+	let inputValue = ref<string>(''); // 表单显示值
+	let showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择弹唱
+	let columns = ref<Array<Array<string>>>([]);
+	let innerDefaultIndex = ref<number[]>([]);
+	let innerFormatter = ref<(type: string, value: string) => string> ((type: string, value: string) => {
+		return value
+	});
+	let innerValue = ref<any>('');
+	// 记录最近一次通过change上抛给外部的值，用于去重，
+	// 避免边界(min/max)变化导致程序化重建列时再次触发change
+	let lastEmitValue = ref<any>('');
+	
+	const changeShow = () => {
+		showByClickInput.value = !showByClickInput.value
+	}
+
+	function toInt(value: any, fallback: number = 0): number {
+		if (value == null) return fallback
+		const num = parseInt(value.toString())
+		return isNaN(num) ? fallback : num
+	}
+
+	// 按列安全读取 picker 值，避免快速滚动时出现越界/空值
+	function safeColumnValue(values: Array<any[]>, columnIndex: number, optionIndex: number, fallback: string = ''): string {
+		const column = values.length > columnIndex && values[columnIndex] != null ? values[columnIndex] : []
+		if (column.length == 0) return fallback
+		let index = optionIndex
+		if (isNaN(index)) index = 0
+		index = range(0, column.length - 1, index)
+		const value = column[index]
+		if (value == null) return fallback
+		return value.toString()
+	}
+
+	function columnsEqual(left: Array<Array<string>>, right: Array<Array<string>>): boolean {
+		if (left.length != right.length) return false
+		for (let i = 0; i < left.length; i++) {
+			const leftColumn = left[i]
+			const rightColumn = right[i]
+			if (leftColumn.length != rightColumn.length) return false
+			for (let j = 0; j < leftColumn.length; j++) {
+				if (leftColumn[j] != rightColumn[j]) return false
+			}
+		}
+		return true
+	}
+	
+	function getInputValue(newValue: string) {
+		if (newValue == '' || newValue == null) {
+			inputValue.value = ''
+			return
+		}
+		if (props.mode == 'time' || props.mode == 'timesecond') {
+			inputValue.value = newValue
+		} else {
+			if (props.format != '') {
+				// 判断format中是否包含小写的y，如果有则认为是库自身的yyyy-mm-dd格式，使用timeFormat
+				// 否则认为是dayjs的YYYY-MM-DD格式，直接传给dayjs
+				if (props.format.includes('y')) {
+					inputValue.value = timeFormat(newValue, props.format)
+				} else {
+					inputValue.value = dayuts(newValue).format(props.format)
+				}
+			} else {
+				let format = ''
+				switch (props.mode) {
+					case 'date':
+						format = 'YYYY-MM-DD'
+						break;
+					case 'year-month':
+						format = 'YYYY-MM'
+						break;
+					case 'datetime':
+						format = 'YYYY-MM-DD HH:mm'
+						break;
+					case 'datehour':
+						format = 'YYYY-MM-DD HH'
+						break;
+					case 'datetimesecond':
+						format = 'YYYY-MM-DD HH:mm:ss'
+						break;
+					case 'time':
+						format = 'HH:mm'
+						break;
+					case 'timesecond':
+						format = 'HH:mm:ss'
+						break;
+					default:
+						break;
+				}
+				inputValue.value = dayuts(newValue).format(format)
+			}
+		}
+	}
+	
+	function getFormatFunc():(type: string, value: string) => string {
+		let formatter = function(type: string, value: string) {return value}
+		if (props.formatter != null) {
+			formatter = props.formatter as (type: string, value: string) => string
+		} else {
+			// formatter = function(type: string, value: string) {
+				
+			// 	return that.$callMethod('innerFormatter', type, value).toString()
+			// }
+			formatter = innerFormatter.value as (type: string, value: string) => string
+		}
+		return formatter
+	}
+	
+	// 更新索引
+	function updateIndexs(value: any) {
+		// 值为空（从未选择或被外部清空）时各列停在默认位置（defaultIndex），
+		// 直接拿空值去算会得到 NaN 索引，反而把列滚到非法位置
+		if (value == null || value == '') return
+		let values: string[] = []
+		let formatterFunc = (type: string, value: string) => {return value}
+		formatterFunc = getFormatFunc()
+		if (props.mode === 'time' || props.mode === 'timesecond') {
+			// 将time模式的时间用:分隔成数组
+			const timeArr: string[] = value.toString().split(':')
+			// 使用formatter格式化方法进行管道处理
+			values = [formatterFunc('hour', timeArr[0]), formatterFunc('minute', timeArr[1])]
+			if (props.mode === 'timesecond') {
+				values.push(formatterFunc('second', timeArr[2]))
+			}
+		} else {
+			const date = new Date(value.toString())
+			values = [
+				formatterFunc('year', `${dayuts(value).year()}`),
+				// 月份补0
+				formatterFunc('month', padZero(dayuts(value).month() + 1))
+			]
+			if (props.mode === 'date' || props.mode === 'datehour' || props.mode === 'datetime' || props.mode === 'datetimesecond') {
+				// date模式，需要添加天列
+				values.push(formatterFunc('day', padZero(dayuts(value).date())))
+			}
+			if (props.mode === 'datehour' || props.mode === 'datetime' || props.mode === 'datetimesecond') {
+				values.push(formatterFunc('hour', padZero(dayuts(value).hour())))
+			}
+			if (props.mode === 'datetime' || props.mode === 'datetimesecond') {
+				values.push(formatterFunc('minute', padZero(dayuts(value).minute())))
+			}
+			if (props.mode === 'datetimesecond') {
+				values.push(formatterFunc('second', padZero(dayuts(value).second())))
+			}
+		}
+	
+		// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
+		let indexs: Array<number> = []
+		columns.value.forEach((column: string[], index: number) => {
+			indexs.push(Math.max(0, column.findIndex((item: string) => item === values[index])))
+		});
+		// const indexs = this.columns.map((column: any[], index: number): number => {
+		// 	// 通过取大值，可以保证不会出现找不到索引的-1情况
+		// 	return Math.max(0, column.findIndex((item: any) => item === values[index]))
+		// })
+		innerDefaultIndex.value = indexs
+	}
+	
+	// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
+	function getBoundary(type: string, innerValue: any) {
+		let value = new Date(innerValue.toString())
+		if (isNaN(value.getTime())) {
+			value = new Date()
+		}
+		let boundary = new Date(props.minDate as number)
+		switch (type){
+			case 'min':
+				boundary = new Date(props.minDate as number)
+				break;
+			case 'max':
+				boundary = new Date(props.maxDate as number)
+				break;
+			default:
+				break;
+		}
+		const year = dayuts(boundary).year()
+		let month = 1
+		let date = 1
+		let hour = 0
+		let minute = 0
+		let second = 0
+		if (type === 'max') {
+			month = 12
+			// 月份的天数 - 应该使用boundary的月份，而不是value的月份
+			date = dayuts(boundary).daysInMonth()
+			hour = 23
+			minute = 59
+			second = 59
+		}
+		// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
+		if (dayuts(value).year() === year) {
+			month = dayuts(boundary).month() + 1
+			if (dayuts(value).month() + 1 === month) {
+				date = dayuts(boundary).date()
+				if (dayuts(value).date() === date) {
+					hour = dayuts(boundary).hour()
+					if (dayuts(value).hour() === hour) {
+						minute = dayuts(boundary).minute()
+						if (dayuts(value).minute() === minute) {
+							second = dayuts(boundary).second()
+						}
+					}
+				}
+			}
+		}
+		let result = {} as UTSJSONObject
+		result[`${type}Year`] = year
+		result[`${type}Month`] = month
+		result[`${type}Date`] = date
+		result[`${type}Hour`] = hour
+		result[`${type}Minute`] = minute
+		result[`${type}Second`] = second
+		return result
+	}
+	
+	// 获取每列的最大和最小值
+	function getRanges(): Array<UTSJSONObject> {
+		if (props.mode === 'time' || props.mode === 'timesecond') {
+			const timeColumns = [
+				{
+					type: 'hour',
+					ranges: [props.minHour, props.maxHour],
+				},
+				{
+					type: 'minute',
+					ranges: [props.minMinute, props.maxMinute],
+				},
+			]
+			if (props.mode === 'timesecond') {
+				timeColumns.push({
+					type: 'second',
+					ranges: [props.minSecond, props.maxSecond],
+				} as UTSJSONObject)
+			}
+			return timeColumns as Array<UTSJSONObject>
+		}
+		const maxObj = getBoundary('max', innerValue.value);
+		const minObj = getBoundary('min', innerValue.value);
+		const maxYear = maxObj['maxYear'];
+		const maxDate = maxObj['maxDate'];
+		const maxMonth = maxObj['maxMonth'];
+		const maxHour = maxObj['maxHour'];
+		const maxMinute = maxObj['maxMinute'];
+		const maxSecond = maxObj['maxSecond'];
+		const minYear = minObj['minYear'];
+		const minDate = minObj['minDate'];
+		const minMonth = minObj['minMonth'];
+		const minHour = minObj['minHour'];
+		const minMinute = minObj['minMinute'];
+		const minSecond = minObj['minSecond'];
+		const result = [
+			{
+				type: 'year',
+				ranges: [minYear, maxYear],
+			},
+			{
+				type: 'month',
+				ranges: [minMonth, maxMonth],
+			},
+			{
+				type: 'day',
+				ranges: [minDate, maxDate],
+			},
+			{
+				type: 'hour',
+				ranges: [minHour, maxHour],
+			},
+			{
+				type: 'minute',
+				ranges: [minMinute, maxMinute],
+			},
+			{
+				type: 'second',
+				ranges: [minSecond, maxSecond],
+			},
+		];
+		// 兜底：防止边界计算异常导致日列出现空范围（快速滚动场景）
+		if (result.length > 2) {
+			const dayItem = result[2]
+			const dayType = dayItem['type'] as string
+			if (dayType == 'day') {
+				const dayRange = dayItem['ranges'] as Array<number>
+				const start = dayRange[0]
+				const end = dayRange[1]
+				if (isNaN(start) || isNaN(end) || start > end) {
+					const fallbackDays = dayuts(innerValue.value).isValid() ? dayuts(innerValue.value).daysInMonth() : 31
+					dayItem['ranges'] = [1, fallbackDays]
+				}
+			}
+		}
+		if (props.mode === 'date')
+			result.splice(3, 3);
+		if (props.mode === 'datehour')
+			result.splice(4, 2);
+		if (props.mode === 'datetime')
+			result.splice(5, 1);
+		if (props.mode === 'year-month')
+			result.splice(2, 4);
+		return result;
+	}
+
+
+	function timesFunc(n: number, type: string, ranges: number[]): string[] {
+		let index = -1
+		let result: string[] = []
+		if (n > 0) {
+			for (var i = 0; i < n; i++) {
+				result.push('')
+			}
+		}
+		let fu = function(index: number): string {
+			let value = (parseInt(ranges[0].toString()) + index).toString()
+			value = type === 'year' ? `${value}` : padZero(value)
+			return value
+		}
+		while (++index < n) {
+			result[index] = fu(index)
+		}
+		return result
+	}
+
+	function getOriginColumns(): Array<UTSJSONObject> {
+		// 生成各列的值
+		let results: Array<UTSJSONObject> = []
+		let rangesList:Array<UTSJSONObject> = getRanges()
+		rangesList.forEach((item: UTSJSONObject) => {
+			// @ts-ignore
+			let type = item['type'].toString()
+			let ranges: Array<number> = item['ranges'] as Array<number>
+			let values: string[] = timesFunc((ranges[1] - ranges[0] + 1), type, ranges)
+			// 进行过滤
+			if (props.filter != null) {
+				let filterFunc = props.filter as (type: string, value: string[]) => string[]
+				let tmp = filterFunc(type, values)
+				if (tmp != null) {
+					values = tmp as string[]
+				}
+				if (values == null || (values.length == 0)) {
+					uni.showToast({
+						title: '日期filter结果不能为空',
+						icon: 'error',
+						mask: true
+					})
+				}
+			}
+			results.push({
+				type: type,
+				values: values
+			})
+		})
+		return results
+	}
+	
+	// 更新各列的值
+	function buildColumns(): Array<Array<string>> {
+		const formatter = getFormatFunc()
+		// 获取各列的值，并且map后，对各列的具体值进行补0操作
+		// const results = this.getOriginColumns().map((column: UTSJSONObject) => (column['values'] as Array<string>).map((value: string) => formatter(column['type'].toString(), value)))
+		const originColumns = getOriginColumns();
+		const results: Array<Array<string>> = [];
+		originColumns.forEach((column: UTSJSONObject) => {
+			// @ts-ignore
+			const formattedValues: string[] = (column['values'] as Array<string>).map((value: string) => formatter(column['type'].toString(), value));
+			results.push(formattedValues);
+		});
+		return results
+	}
+
+	// 更新各列的值
+	function updateColumns() {
+		columns.value = buildColumns()
+	}
+	
+	// 更新各列的值，进行补0、格式化等操作
+	function updateColumnValue(value: any) {
+		innerValue.value = value
+		updateColumns()
+		// 延迟执行，等待up-picker组件列数据更新完后再设置选中值索引
+		// 用nextTick包裹确保columns已更新到DOM后再设置索引
+		nextTick(() => {
+			setTimeout(() => {
+				updateIndexs(value)
+			}, 0)
+		})
+	}
+
+	function syncColumnsAfterChange(value: any) {
+		const nextColumns = buildColumns()
+		if (!columnsEqual(columns.value, nextColumns)) {
+			columns.value = nextColumns
+			// 延迟执行，等待up-picker组件列数据更新完后再设置选中值索引
+			nextTick(() => {
+				setTimeout(() => {
+					updateIndexs(value)
+				}, 0)
+			})
+		}
+	}
+	
+	// 得出合法的时间
+	function correctValue(val: number | string | null): any {
+		// 空值代表“未选择/已清空”，直接返回空串。
+		// 否则日期模式会被夹取成minDate、时间模式会被夹取成minHour:minMinute，
+		// 导致外部清空绑定值后输入框仍然显示最小日期/最小时间
+		if (val == null || val == '') return ''
+		let value: number | string = ''
+		if (val != null && val != '') {
+			value = val
+		}
+		const isDateMode = props.mode !== 'time' && props.mode !== 'timesecond'
+		if (isDateMode && (value == null || value == '')) {
+			// 如果是日期类型，但是又没有设置值的话，使用当前时间为默认时间
+			value = new Date().getTime()
+		} else if (isDateMode) {
+			// 如果是日期类型且有值，确保它是有效的时间戳
+			let timestamp = 0
+			if (typeof value === 'number') {
+				timestamp = value
+			} else if (typeof value === 'string') {
+				// 尝试解析字符串为时间戳
+				const numValue = parseInt(value.toString())
+				if (!isNaN(numValue)) {
+					timestamp = numValue
+				} else {
+					// 尝试解析日期字符串
+					const date = new Date(value)
+					if (!isNaN(date.getTime())) {
+						timestamp = date.getTime()
+					} else {
+						// 无效的日期，使用当前时间
+						timestamp = new Date().getTime()
+					}
+				}
+			}
+			value = timestamp
+		} else if (!isDateMode && (value == null || value == '')) {
+			// 如果是时间类型，而又没有默认值的话，就用当前时间的时分秒
+			const now = new Date()
+			value = props.mode === 'timesecond'
+				? `${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`
+				: `${padZero(now.getHours())}:${padZero(now.getMinutes())}`
+		}
+		// 时间类型
+		if (!isDateMode) {
+			if ((value.toString()).indexOf(':') == -1)  {
+				error('时间错误，请传递如12:24的格式')
+				return ''
+			}
+			const timeArr = value.toString().split(':')
+			let hour = timeArr[0]
+			let minute = timeArr.length > 1 ? timeArr[1] : '0'
+			let second = timeArr.length > 2 ? timeArr[2] : '0'
+			// 对时间补零，同时控制在最小值和最大值之间
+			const hourNum = parseInt(hour)
+			const minuteNum = parseInt(minute)
+			hour = padZero(range(props.minHour, props.maxHour, isNaN(hourNum) ? props.minHour : hourNum))
+			minute = padZero(range(props.minMinute, props.maxMinute, isNaN(minuteNum) ? props.minMinute : minuteNum))
+			if (props.mode === 'timesecond') {
+				const secondNum = parseInt(second)
+				second = padZero(range(props.minSecond, props.maxSecond, isNaN(secondNum) ? props.minSecond : secondNum))
+				return `${hour}:${minute}:${second}`
+			}
+			return `${hour}:${minute}`
+		} else {
+			// 如果是日期格式，控制在最小日期和最大日期之间
+			// @ts-ignore
+			value = dayuts(value).isBefore(dayuts(props.minDate)) ? props.minDate : value
+			// @ts-ignore
+			value = dayuts(value).isAfter(dayuts(props.maxDate)) ? props.maxDate : value
+			return value
+		}
+	}
+	
+	function init() {
+		// #ifdef VUE3
+		// @ts-ignore
+		innerValue.value = correctValue(props.modelValue)
+		// #endif
+		// #ifdef VUE2
+		innerValue.value = correctValue(props.value)
+		// #endif
+		updateColumnValue(innerValue.value)
+
+		// 初始化hasInput展示
+		getInputValue(innerValue.value.toString())
+		// 以外部值为基准，重置去重基准
+		lastEmitValue.value = innerValue.value
+	}
+
+	// 边界(minMinute等)变化时调用：以当前已选值(innerValue)为基准，
+	// 按新的边界重新校正并重建各列，而不是回退到外部modelValue。
+	// 这样在未点击确认前也不会丢失/重置用户已经滚动选择的值。
+	function reInitColumns() {
+		let base: any = innerValue.value
+		if (base == null || base == '') {
+			// #ifdef VUE3
+			// @ts-ignore
+			base = props.modelValue
+			// #endif
+			// #ifdef VUE2
+			base = props.value
+			// #endif
+		}
+		// correctValue会把小于新minMinute(或大于maxMinute)的值夹取到合法范围内，
+		// 例如原选中15:30、minMinute变为51时会被夹取为15:51
+		let corrected: any = correctValue(base)
+		const changed = corrected != innerValue.value
+		innerValue.value = corrected
+		updateColumnValue(corrected)
+		getInputValue(corrected.toString())
+		// 仅当已选值确实因边界收紧而被夹取变化时，才补发一次change通知外部；
+		// 值未变化则不上抛，避免边界变化引起的重复change
+		if (changed && lastEmitValue.value != corrected) {
+			lastEmitValue.value = corrected
+			emit('change', {
+				value: corrected,
+				mode: props.mode
+			})
+		}
+	}
+	
+	// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+	function setFormatter(e: (type: string, value: string) => string) {
+		innerFormatter.value = e
+	}
+	
+	// 关闭选择器
+	function close() {
+		if (props.closeOnClickOverlay) {
+			if (props.hasInput) {
+				showByClickInput.value = false
+			}
+			emit('close')
+		}
+	}
+
+	// 弹窗离场动画结束，透传给使用者
+	function closedHandler() {
+		emit('closed')
+	}
+	
+	// 点击工具栏的取消按钮
+	function cancel() {
+		if (props.hasInput) {
+			showByClickInput.value = false
+		}
+		emit('cancel')
+	}
+	
+	// 点击工具栏的确定按钮
+	function confirm() {
+		// 值为空(从未选择或被外部清空)时，用户看到的是各列当前停留的位置，
+		// 直接上抛空值会“所见非所得”，故先按各列当前显示值取一次真实值
+		if ((innerValue.value == null || innerValue.value == '') && columns.value.length > 0) {
+			change({
+				indexs: innerDefaultIndex.value,
+				values: columns.value
+			} as UTSJSONObject)
+		}
+		emit('update:modelValue', innerValue.value)
+		if (props.hasInput) {
+			getInputValue(innerValue.value.toString())
+			showByClickInput.value = false
+		}
+		emit('confirm', {
+			value: innerValue.value,
+			mode: props.mode
+		})
+	}
+	
+	//用正则截取输出值,当出现多组数字时,抛出错误
+	function intercept(e: string, type: string = ''): string {
+		if (e == null) {
+			return type != '' ? '0000' : '00'
+		}
+		let judge = e.toString().match(/\d+/g)
+		if (judge != null) {
+			//判断是否掺杂数字
+			if(judge!.length>1){
+				error("请勿在过滤或格式化函数时添加数字")
+				return '0'
+			}else if(type != '' && judge[0]?.length==4){//判断是否是年份
+				return judge![0].toString()
+			}else if(judge![0]!.length>2){
+				error("请勿在过滤或格式化函数时添加数字")
+				return '0'
+			}else{
+				return judge![0].toString()
+			}
+		} else {
+			return type != '' ? '0000' : '00'
+		}
+	}
+	
+	// 列发生变化时触发
+	// {
+	// 	value: valueOrigin,
+	// 	index,
+	// 	indexs: value,
+	// 	// values为当前变化列的数组内容
+	// 	values,
+	// 	columnIndex
+	// }
+	function change(e: UTSJSONObject) {
+		let indexs = e['indexs'] as number[]
+		let values = e['values'] as Array<any[]>
+		if (values == null) values = []
+		let selectValue: any = ''
+		if(props.mode === 'time' || props.mode === 'timesecond') {
+			// 根据value各列索引，从各列数组中，取出当前时间的选中值
+			const hourText = safeColumnValue(values, 0, indexs[0], padZero(props.minHour))
+			const minuteText = safeColumnValue(values, 1, indexs[1], padZero(props.minMinute))
+			const secondText = safeColumnValue(values, 2, indexs[2], padZero(props.minSecond))
+			let hour = toInt(intercept(hourText), props.minHour)
+			let minute = toInt(intercept(minuteText), props.minMinute)
+			let second = toInt(intercept(secondText), props.minSecond)
+			hour = range(props.minHour, props.maxHour, hour)
+			minute = range(props.minMinute, props.maxMinute, minute)
+			second = range(props.minSecond, props.maxSecond, second)
+			selectValue = `${padZero(hour)}:${padZero(minute)}`
+			if (props.mode === 'timesecond') {
+				selectValue = `${selectValue}:${padZero(second)}`
+			}
+		} else {
+			const validCurrent = dayuts(innerValue.value).isValid() ? dayuts(innerValue.value) : dayuts(props.minDate)
+			const currentYear = validCurrent.year()
+			const currentMonth = validCurrent.month() + 1
+			const currentDate = validCurrent.date()
+			const currentHour = validCurrent.hour()
+			const currentMinute = validCurrent.minute()
+			const currentSecond = validCurrent.second()
+
+			const yearText = safeColumnValue(values, 0, indexs[0], currentYear.toString())
+			const monthText = safeColumnValue(values, 1, indexs[1], padZero(currentMonth))
+			// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
+			let year = toInt(intercept(yearText, 'year'), currentYear)
+			let month = toInt(intercept(monthText), currentMonth)
+			let hour = 0, minute = 0, second = 0
+			month = range(1, 12, month)
+			// 此月份的最大天数
+			const maxDate = dayuts(`${year}-${month}`).daysInMonth()
+			const dayText = safeColumnValue(values, 2, indexs[2], padZero(Math.min(currentDate, maxDate)))
+			let date = toInt(intercept(dayText), Math.min(currentDate, maxDate))
+			// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
+			if (props.mode === 'year-month') {
+				date = 1
+			}
+			// 不允许超过maxDate值
+			date = range(1, maxDate, date)
+			if (props.mode === 'datehour' || props.mode === 'datetime' || props.mode === 'datetimesecond') {
+				const hourText = safeColumnValue(values, 3, indexs[3], padZero(currentHour))
+				hour = range(0, 23, toInt(intercept(hourText), currentHour))
+			}
+			if (props.mode === 'datetime' || props.mode === 'datetimesecond') {
+				const minuteText = safeColumnValue(values, 4, indexs[4], padZero(currentMinute))
+				minute = range(0, 59, toInt(intercept(minuteText), currentMinute))
+			}
+			if (props.mode === 'datetimesecond') {
+				const secondText = safeColumnValue(values, 5, indexs[5], padZero(currentSecond))
+				second = range(0, 59, toInt(intercept(secondText), currentSecond))
+			}
+			// 转为时间模式
+			selectValue = new Date(year, month - 1, date, hour, minute, second).getTime()
+			if (isNaN(selectValue)) {
+				selectValue = correctValue(innerValue.value)
+			}
+		}
+		// 取出准确的合法值，防止超越边界的情况
+		let selectValueFormat: any = correctValue(selectValue)
+		// 边界变化会程序化重建各列并回填索引，picker-view在部分原生端会再次派发change，
+		// 若此时算出的值与上一次已上抛的值一致，说明并非用户真实操作，直接忽略，避免重复触发change
+		if (selectValueFormat == lastEmitValue.value && selectValueFormat == innerValue.value) {
+			return
+		}
+		innerValue.value = selectValueFormat
+		syncColumnsAfterChange(selectValueFormat)
+		lastEmitValue.value = selectValueFormat
+		// 发出change时间，value为当前选中的时间戳
+		emit('change', {
+			value: selectValueFormat,
+			// #ifndef MP-WEIXIN
+			// 微信小程序不能传递this实例，会因为循环引用而报错
+			// picker: this.$refs.picker,
+			// #endif
+			mode: props.mode
+		})
+	}
+	
+	// 通过最大值和最小值生成数组
+	function generateArray(start: number, end: number): number[] {
+		const result: number[] = []
+		for (let i = start; i <= end; i++) {
+			result.push(i)
+		}
+		return result
+	}
+
+		watch((): boolean => props.show, (newValue: boolean) => {
+			if (!newValue && props.hasInput) {
+				showByClickInput.value = false
+			}
+			if (newValue) {
+				updateColumnValue(innerValue.value)
+				// 打开时以当前值为基准，重置去重基准
+				lastEmitValue.value = innerValue.value
+				// 弹窗打开时，原生picker-view需要一定时间完成渲染，在Android/HarmonyOS端
+				// 仅靠updateColumnValue中的nextTick不足以保证索引设置成功，需额外兜底
+				setTimeout(() => {
+					updateIndexs(innerValue.value)
+				}, 150)
+			}
+		})
+		// #ifdef VUE3
+		watch((): any => props.modelValue, () => {
+			init();
+		})
+		// #endif
+		// #ifdef VUE2
+		watch((): any => props.value, () => {
+			init();
+		})
+		// #endif
+		// mode变化会改变已选值的语义(时间串<->时间戳)，需要完整重新初始化
+		watch((): string => props.mode, () => {
+			init();
+		})
+		// 边界(min/max、filter)变化时，保留当前已选值，仅重新校正并重建各列，
+		// 不回退到外部 modelValue，避免未确认前丢失用户已滚动的值
+		watch(
+			(): Array<any|null> => [
+				props.maxDate,
+				props.minDate,
+				props.minHour,
+				props.maxHour,
+				props.minMinute,
+				props.maxMinute,
+				props.minSecond,
+				props.maxSecond,
+				props.filter
+			],
+			() => {
+				reInitColumns();
+			}
+		)
+		
+		// 初始化
+		init();
+
+		// 在Android/HarmonyOS原生端，picker-view初始化时原生组件渲染需要时间，
+		// 首次init()中的nextTick可能仍早于原生组件就绪，需额外延时兜底
+		onMounted(() => {
+			if (props.pageInline) {
+				setTimeout(() => {
+					updateIndexs(innerValue.value)
+				}, 200)
+			}
+		})
+	</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	.up-datetime-picker {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+        /* #endif */
+        &__has-input {
+        }
+	}
+</style>