ai_uniapp_v2/uni_modules/uview-plus/components/u-datetime-picker/u-datetime-picker.vue

<template>
    <view class="u-datetime-picker">
        <view v-if="hasInput" class="u-datetime-picker__has-input"
            @click="onShowByClickInput"
        >
            <slot name="trigger" :value="inputValue">
				<up-input
					:readonly="!!showByClickInput"
					v-model="inputValue"
					v-bind="inputPropsInner"
				></up-input>
				<cover-view class="input-cover">
				</cover-view>
			</slot>
        </view>
        <u-picker
            ref="picker"
            :show="pageInline || show || (hasInput && showByClickInput)"
            :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"
			:pageInline="pageInline"
			:maskClass="maskClass"
			:maskStyle="resolvedMaskStyle"
            @close="close"
            @cancel="cancel"
            @confirm="confirm"
            @change="change"
        >
            <template #toolbar-right>
                <slot name="toolbar-right">
                </slot>
            </template>
            <template #toolbar-bottom>
                <slot name="toolbar-bottom">
                </slot>
            </template>
        </u-picker>
    </view>
</template>

<script>
	function times(n, iteratee) {
	    let index = -1
	    const result = Array(n < 0 ? 0 : n)
	    while (++index < n) {
	        result[index] = iteratee(index)
	    }
	    return result
	}
	import { props } from './props';
	import { mpMixin } from '../../libs/mixin/mpMixin';
	import { mixin } from '../../libs/mixin/mixin';
	import dayjs from './dayjs.esm.min.js';
	import { range, error, padZero } from '../../libs/function/index';
	import test from '../../libs/function/test';
	/**
	 * DatetimePicker 时间日期选择器
	 * @description 此选择器用于时间日期
	 * @tutorial https://uview-plus.jiangruyi.com/components/datetimePicker.html
	 * @property {Boolean}			show				用于控制选择器的弹出与收起 ( 默认 false )
	 * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
	 * @property {String | Number}	modelValue		    绑定值
	 * @property {String}			title				顶部标题
	 * @property {String}			mode				展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择，mode=datehour为日期小时选择，mode=timesecond为时分秒选择，mode=datetimesecond为日期时分秒选择  ( 默认 ‘datetime )
	 * @property {Number}			maxDate				可选的最大时间  默认值为后10年
	 * @property {Number}			minDate				可选的最小时间  默认值为前10年
	 * @property {Number}			minHour				可选的最小小时，仅mode=time/timesecond有效   ( 默认 0 )
	 * @property {Number}			maxHour				可选的最大小时，仅mode=time/timesecond有效	  ( 默认 23 )
	 * @property {Number}			minMinute			可选的最小分钟，仅mode=time/timesecond有效	  ( 默认 0 )
	 * @property {Number}			maxMinute			可选的最大分钟，仅mode=time/timesecond有效   ( 默认 59 )
	 * @property {Number}			minSecond			可选的最小秒，仅mode=timesecond有效   ( 默认 0 )
	 * @property {Number}			maxSecond			可选的最大秒，仅mode=timesecond有效   ( 默认 59 )
	 * @property {Function}			filter				选项过滤函数
	 * @property {Function}			formatter			选项格式化函数
	 * @property {Boolean}			loading				是否显示加载中状态   ( 默认 false )
	 * @property {String | Number}	itemHeight			各列中，单个选项的高度   ( 默认 44 )
	 * @property {String}			cancelText			取消按钮的文字  ( 默认 '取消' )
	 * @property {String}			confirmText			确认按钮的文字  ( 默认 '确认' )
	 * @property {String}			cancelColor			取消按钮的颜色  ( 默认 '#909193' )
	 * @property {String}			confirmColor		确认按钮的颜色  ( 默认 '#3c9cff' )
	 * @property {String | Number}	visibleItemCount	每列中可见选项的数量  ( 默认 5 )
	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器  ( 默认 false )
	 * @property {Array}			defaultIndex		各列的默认索引
	 * @event {Function} close 关闭选择器时触发
	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
	 * @event {Function} change 当选择值变化时触发
	 * @event {Function} cancel 点击取消按钮
	 * @example  <u-datetime-picker :show="show" :value="value1"  mode="datetime" ></u-datetime-picker>
	 */
	export default {
		name: 'up-datetime-picker',
		mixins: [mpMixin, mixin, props],
		data() {
			return {
                // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
                inputValue: '', // 表单显示值
                showByClickInput: false, // 是否在hasInput模式下显示日期选择弹唱
				columns: [],
				innerDefaultIndex: [],
				innerFormatter: (type, value) => value
			}
		},
		watch: {
			show(newValue, oldValue) {
				if (!newValue && this.hasInput) {
					this.showByClickInput = false
				}
				if (newValue) {
					// #ifdef VUE3
					this.innerValue = this.correctValue(this.modelValue)
					// #endif
					// #ifdef VUE2
					this.innerValue = this.correctValue(this.value)
					// #endif
					this.updateColumnValue(this.innerValue)
				}
			},
			// #ifdef VUE3
			modelValue(newValue) {
				this.init()
				// this.getInputValue(newValue)
			},
			// #endif
			// #ifdef VUE2
			value(newValue) {
				this.init()
				// this.getInputValue(newValue)
			},
			// #endif
			propsChange() {
				this.init()
			}
		},
		computed: {
			// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
			propsChange() {
				return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.minSecond, this.maxSecond, this.filter, this.modelValue]
			},
			resolvedMaskStyle() {
				if (this.upHasProp('maskStyle')) {
					return this.maskStyle || ''
				}
				if (this.upThemeIsDark) {
					const topBottomStrong = 'rgba(28, 28, 30, 0.95)'
					const topBottomWeak = 'rgba(28, 28, 30, 0.6)'
					return `background-image: linear-gradient(180deg, ${topBottomStrong}, ${topBottomWeak}), linear-gradient(0deg, ${topBottomStrong}, ${topBottomWeak});`
				}
				return ''
			},
			// input的props
			inputPropsInner() {
				return {
					border: this.inputBorder,
            		placeholder: this.placeholder,
					disabled: this.disabled,
					disabledColor: this.disabledColor,
					...this.inputProps
				}
			}
		},
		mounted() {
			this.init()
			// pageInline模式下picker-view常驻显示，在原生端(Android/HarmonyOS)需要
			// 等待原生picker-view组件完成初始化后再重新设置选中值，否则滚动位置可能不生效
			if (this.pageInline) {
				setTimeout(() => {
					this.updateIndexs(this.innerValue)
				}, 200)
			}
		},
		// #ifdef VUE3
		emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
		// #endif
		methods: {
			toInt(value, fallback = 0) {
				const num = parseInt(value, 10)
				return Number.isFinite(num) ? num : fallback
			},
			// 按列安全读取 picker 值，避免快速滚动时出现越界/空值
			safeColumnValue(values, columnIndex, optionIndex, fallback = '') {
				const column = Array.isArray(values[columnIndex]) ? values[columnIndex] : []
				if (!column.length) return fallback
				let index = Number(optionIndex)
				if (!Number.isFinite(index)) index = 0
				index = range(0, column.length - 1, index)
				const value = column[index]
				return value == null ? fallback : value
			},
			getInputValue(newValue) {
				if (newValue == '' || !newValue || newValue == undefined) {
					this.inputValue = ''
					return
				}
				if (this.mode === 'time' || this.mode === 'timesecond') {
					this.inputValue = newValue
				} else {
					if (this.format) {
						this.inputValue = dayjs(newValue).format(this.format)
					} else {
						let format = ''
						switch (this.mode) {
							case 'date':
								format = 'YYYY-MM-DD'
								break;
							case 'year-month':
								format = 'YYYY-MM'
								break;
							case 'datehour':
								format = 'YYYY-MM-DD HH'
								break;
							case 'datetime':
								format = 'YYYY-MM-DD HH:mm'
								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;
						}
						this.inputValue = dayjs(newValue).format(format)
					}
				}
			},
			init() {
				// #ifdef VUE3
				this.innerValue = this.correctValue(this.modelValue)
				// #endif
				// #ifdef VUE2
				this.innerValue = this.correctValue(this.value)
				// #endif
				this.updateColumnValue(this.innerValue)

				// 初始化hasInput展示
				this.getInputValue(this.innerValue)
			},
			// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
			setFormatter(e) {
				this.innerFormatter = e
			},
			// 关闭选择器
			close() {
				if (this.hasInput) {
					this.showByClickInput = false
				}
				if (this.closeOnClickOverlay) {
					if (this.hasInput) {
						this.showByClickInput = false
					}
					this.$emit('close')
				}
			},
			// 点击工具栏的取消按钮
			cancel() {
                if (this.hasInput) {
                    this.showByClickInput = false
                }
				this.$emit('cancel')
			},
			// 点击工具栏的确定按钮
			confirm() {
				// #ifdef VUE3
				this.$emit('update:modelValue', this.innerValue)
				// #endif
				// #ifdef VUE2
				this.$emit('input', this.innerValue)
				// #endif
                if (this.hasInput) {
					this.getInputValue(this.innerValue)
                    this.showByClickInput = false
                }
				this.$emit('confirm', {
					value: this.innerValue,
					mode: this.mode
				})
			},
			//用正则截取输出值,当出现多组数字时,抛出错误
			intercept(e,type){
				if (e === undefined || e === null) {
					return type ? '0000' : '00'
				}
				let judge = String(e).match(/\d+/g)
				if (!judge || judge.length === 0) {
					return type ? '0000' : '00'
				}
				//判断是否掺杂数字
				if(judge.length>1){
					error("请勿在过滤或格式化函数时添加数字")
					return 0
				}else if(type&&judge[0].length==4){//判断是否是年份
					return judge[0]
				}else if(judge[0].length>2){
					error("请勿在过滤或格式化函数时添加数字")
					return 0
				}else{
					return judge[0]
				}
			},
			// 列发生变化时触发
			change(e) {
				const { indexs, values } = e
				const safeValues = Array.isArray(values) ? values : []
				let selectValue = ''
				if (this.mode === 'time' || this.mode === 'timesecond') {
					// 根据value各列索引，从各列数组中，取出当前时间的选中值
					const hourText = this.safeColumnValue(safeValues, 0, indexs[0], padZero(this.minHour))
					const minuteText = this.safeColumnValue(safeValues, 1, indexs[1], padZero(this.minMinute))
					let hour = this.toInt(this.intercept(hourText), this.minHour)
					let minute = this.toInt(this.intercept(minuteText), this.minMinute)
					let second = this.minSecond
					hour = range(this.minHour, this.maxHour, hour)
					minute = range(this.minMinute, this.maxMinute, minute)
					selectValue = `${padZero(hour)}:${padZero(minute)}`
					if (this.mode === 'timesecond') {
						const secondText = this.safeColumnValue(safeValues, 2, indexs[2], padZero(this.minSecond))
						second = range(this.minSecond, this.maxSecond, this.toInt(this.intercept(secondText), this.minSecond))
						selectValue = `${selectValue}:${padZero(second)}`
					}
				} else {
					const validCurrent = dayjs(this.innerValue).isValid() ? dayjs(this.innerValue) : dayjs(this.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 = this.safeColumnValue(safeValues, 0, indexs[0], `${currentYear}`)
					const monthText = this.safeColumnValue(safeValues, 1, indexs[1], padZero(currentMonth))
					// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
					let year = this.toInt(this.intercept(yearText, 'year'), currentYear)
					let month = this.toInt(this.intercept(monthText), currentMonth)
					let hour = 0, minute = 0, second = 0
					month = range(1, 12, month)
					// 此月份的最大天数
					const maxDate = dayjs(`${year}-${month}`).daysInMonth()
					const dayText = this.safeColumnValue(safeValues, 2, indexs[2], padZero(Math.min(currentDate, maxDate)))
					let date = this.toInt(this.intercept(dayText), Math.min(currentDate, maxDate))
					// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
					if (this.mode === 'year-month') {
					    date = 1
					}
					// 不允许超过maxDate值
					date = range(1, maxDate, date)
					if (this.mode === 'datehour' || this.mode === 'datetime' || this.mode === 'datetimesecond') {
						const hourText = this.safeColumnValue(safeValues, 3, indexs[3], padZero(currentHour))
					    hour = range(0, 23, this.toInt(this.intercept(hourText), currentHour))
					}
					if (this.mode === 'datetime' || this.mode === 'datetimesecond') {
						const minuteText = this.safeColumnValue(safeValues, 4, indexs[4], padZero(currentMinute))
					    minute = range(0, 59, this.toInt(this.intercept(minuteText), currentMinute))
					}
					if (this.mode === 'datetimesecond') {
						const secondText = this.safeColumnValue(safeValues, 5, indexs[5], padZero(currentSecond))
					    second = range(0, 59, this.toInt(this.intercept(secondText), currentSecond))
					}
					// 转为时间模式
					selectValue = Number(new Date(year, month - 1, date, hour, minute, second))
					if (!Number.isFinite(selectValue)) {
						selectValue = this.correctValue(this.innerValue)
					}
				}
				// 取出准确的合法值，防止超越边界的情况
				selectValue = this.correctValue(selectValue)
				this.innerValue = selectValue
				this.updateColumnValue(selectValue)
				// 发出change时间，value为当前选中的时间戳
				this.$emit('change', {
					value: selectValue,
					// #ifndef MP-WEIXIN
					// 微信小程序不能传递this实例，会因为循环引用而报错
					// picker: this.$refs.picker,
					// #endif
					mode: this.mode
				})
			},
			// 更新各列的值，进行补0、格式化等操作
			updateColumnValue(value) {
				this.innerValue = value
				this.updateColumns()
				// 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
				// pageInline模式下picker-view常驻显示，需额外等待原生组件滚动到位
				this.$nextTick(() => {
					setTimeout(() => {
						this.updateIndexs(value)
					}, this.pageInline ? 100 : 0)
				})
			},
			// 更新索引
			updateIndexs(value) {
				let values = []
				const formatter = this.formatter || this.innerFormatter
				if (this.mode === 'time' || this.mode === 'timesecond') {
					// 将time模式的时间用:分隔成数组
				    const timeArr = value.split(':')
					// 使用formatter格式化方法进行管道处理
				    values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
					if (this.mode === 'timesecond') {
						values.push(formatter('second', timeArr[2]))
					}
				} else {
				    values = [
				        formatter('year', `${dayjs(value).year()}`),
						// 月份补0
				        formatter('month', padZero(dayjs(value).month() + 1))
				    ]
				    if (this.mode === 'date' || this.mode === 'datehour' || this.mode === 'datetime' || this.mode === 'datetimesecond') {
						// date模式，需要添加天列
				        values.push(formatter('day', padZero(dayjs(value).date())))
				    }
				    if (this.mode === 'datehour' || this.mode === 'datetime' || this.mode === 'datetimesecond') {
				        values.push(formatter('hour', padZero(dayjs(value).hour())))
				    }
				    if (this.mode === 'datetime' || this.mode === 'datetimesecond') {
						// 数组的push方法，可以写入多个参数
				        values.push(formatter('minute', padZero(dayjs(value).minute())))
				    }
				    if (this.mode === 'datetimesecond') {
				        values.push(formatter('second', padZero(dayjs(value).second())))
				    }
				}

				// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
				const indexs = this.columns.map((column, index) => {
					// 通过取大值，可以保证不会出现找不到索引的-1情况
					return Math.max(0, column.findIndex(item => item === values[index]))
				})
				this.innerDefaultIndex = indexs
			},
			// 更新各列的值
			updateColumns() {
			    const formatter = this.formatter || this.innerFormatter
				// 获取各列的值，并且map后，对各列的具体值进行补0操作
			    const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
				this.columns = results
			},
			getOriginColumns() {
			    // 生成各列的值
			    const results = this.getRanges().map(({ type, range }) => {
			        let values = times(range[1] - range[0] + 1, (index) => {
			            let value = range[0] + index
			            value = type === 'year' ? `${value}` : padZero(value)
			            return value
			        })
					// 进行过滤
			        if (this.filter) {
			            values = this.filter(type, values)
						if (!values || (values && values.length == 0)) {
							// uni.showToast({
							// 	title: '日期filter结果不能为空',
							// 	icon: 'error',
							// 	mask: true
							// })
							console.log('日期filter结果不能为空')
						}
			        }
			        return { type, values }
			    })
			    return results
			},
			// 通过最大值和最小值生成数组
			generateArray(start, end) {
				return Array.from(new Array(end + 1).keys()).slice(start)
			},
			// 得出合法的时间
			correctValue(value) {
				const isDateMode = !['time', 'timesecond'].includes(this.mode)
				// if (isDateMode && !test.date(value)) {
				if (isDateMode && !dayjs.unix(value).isValid()) {
					// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
					value = this.minDate
				} else if (!isDateMode && !value) {
					// 如果是时间类型，而又没有默认值的话，就用最小时间
					value = this.mode === 'timesecond'
						? `${padZero(this.minHour)}:${padZero(this.minMinute)}:${padZero(this.minSecond)}`
						: `${padZero(this.minHour)}:${padZero(this.minMinute)}`
				}
				// 时间类型
				if (!isDateMode) {
					if (String(value).indexOf(':') === -1) return error('时间错误，请传递如12:24的格式')
					const timeArr = String(value).split(':')
					let hour = timeArr[0]
					let minute = timeArr[1]
					let second = timeArr[2]
					// 对时间补零，同时控制在最小值和最大值之间
					const hourNum = Number(hour)
					const minuteNum = Number(minute)
					hour = padZero(range(this.minHour, this.maxHour, Number.isNaN(hourNum) ? this.minHour : hourNum))
					minute = padZero(range(this.minMinute, this.maxMinute, Number.isNaN(minuteNum) ? this.minMinute : minuteNum))
					if (this.mode === 'timesecond') {
						const secondNum = Number(second)
						second = padZero(range(this.minSecond, this.maxSecond, Number.isNaN(secondNum) ? this.minSecond : secondNum))
						return `${hour}:${minute}:${second}`
					}
					return `${hour}:${minute}`
				} else {
					// 如果是日期格式，控制在最小日期和最大日期之间
					value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
					value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
					return value
				}
			},
			// 获取每列的最大和最小值
			getRanges() {
			    if (this.mode === 'time' || this.mode === 'timesecond') {
					const timeColumns = [
						{
							type: 'hour',
							range: [this.minHour, this.maxHour],
						},
						{
							type: 'minute',
							range: [this.minMinute, this.maxMinute],
						}
					]
					if (this.mode === 'timesecond') {
						timeColumns.push({
							type: 'second',
							range: [this.minSecond, this.maxSecond],
						})
					}
			        return timeColumns
			    }
			    const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSecond } = this.getBoundary('max', this.innerValue);
			    const { minYear, minDate, minMonth, minHour, minMinute, minSecond } = this.getBoundary('min', this.innerValue);
			    const result = [
			        {
			            type: 'year',
			            range: [minYear, maxYear],
			        },
			        {
			            type: 'month',
			            range: [minMonth, maxMonth],
			        },
			        {
			            type: 'day',
			            range: [minDate, maxDate],
			        },
			        {
			            type: 'hour',
			            range: [minHour, maxHour],
			        },
			        {
			            type: 'minute',
			            range: [minMinute, maxMinute],
			        },
			        {
			            type: 'second',
			            range: [minSecond, maxSecond],
			        },
			    ];
				// 兜底：防止边界计算异常导致日列出现空范围（快速滚动场景）
				if (result[2] && result[2].type === 'day') {
					const start = Number(result[2].range[0])
					const end = Number(result[2].range[1])
					if (!Number.isFinite(start) || !Number.isFinite(end) || start > end) {
						const fallbackDays = dayjs(this.innerValue).isValid() ? dayjs(this.innerValue).daysInMonth() : 31
						result[2].range = [1, fallbackDays]
					}
				}
			    if (this.mode === 'date')
			        result.splice(3, 3);
			    if (this.mode === 'datehour')
			        result.splice(4, 2);
			    if (this.mode === 'datetime')
			        result.splice(5, 1);
			    if (this.mode === 'year-month')
			        result.splice(2, 4);
			    return result;
			},
			// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
			getBoundary(type, innerValue) {
			    let value = new Date(innerValue)
                if(isNaN(value.getTime())){
                    value = new Date()
                }
			    const boundary = new Date(this[`${type}Date`])
			    const year = dayjs(boundary).year()
			    let month = 1
			    let date = 1
			    let hour = 0
			    let minute = 0
			    let second = 0
			    if (type === 'max') {
			        month = 12
					// 月份的天数
			        date = dayjs(value).daysInMonth()
			        hour = 23
			        minute = 59
			        second = 59
			    }
				// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
			    if (dayjs(value).year() === year) {
			        month = dayjs(boundary).month() + 1
			        if (dayjs(value).month() + 1 === month) {
			            date = dayjs(boundary).date()
			            if (dayjs(value).date() === date) {
			                hour = dayjs(boundary).hour()
			                if (dayjs(value).hour() === hour) {
			                    minute = dayjs(boundary).minute()
			                    if (dayjs(value).minute() === minute) {
			                        second = dayjs(boundary).second()
			                    }
			                }
			            }
			        }
			    }
			    return {
			        [`${type}Year`]: year,
			        [`${type}Month`]: month,
			        [`${type}Date`]: date,
			        [`${type}Hour`]: hour,
			        [`${type}Minute`]: minute,
			        [`${type}Second`]: second
			    }
			},
			onShowByClickInput(){
				if(!this.disabled){
					this.showByClickInput = !this.showByClickInput
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-datetime-picker {
		flex: 1;
        &__has-input {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
            /* #ifndef APP-NVUE */
            width: 100%;
            /* #endif */
			.input-cover {
				opacity: 0;
				position: absolute;
				top: 0;
				bottom: 0;
				left:0;
				right:0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-radius: 4px;
				border: 1px solid var(--up-border-color, #eee);
				padding: 0 10px;
			}
        }
	}
</style>