front/uni_modules/uview-next/components/u-datetime-picker/u-datetime-picker.vue

<template>
	<u-picker ref="picker" 
		:show="show" 
		:closeOnClickOverlay="closeOnClickOverlay" 
		:columns="columns" 
		:title="title"
		:itemHeight="itemHeight"
		:showToolbar="showToolbar"
		:visibleItemCount="visibleItemCount"
		:defaultIndex="innerDefaultIndex" 
		:cancelText="cancelText" 
		:confirmText="confirmText"
		:cancelColor="cancelColor"
		:confirmColor="confirmColor" 
		:immediateChange="immediateChange"
		:round="round" 
		@close="close" 
		@cancel="cancel"
		@confirm="confirm" 
		@change="change"
	>
		<template #trigger>
			<slot name="trigger">
				<slot>
					<u-input 
						v-if="showInput"
						:value="inputValue"
						:clearable="inputProps.clearable"
						:placeholder="inputProps.placeholder"
						:disabled="inputProps.disabled"
						:border="inputProps.border"
						:round="inputProps.round"
						:backgroundColor="inputProps.disabled ? '' : inputProps.backgroundColor"
						:disabledColor="inputProps.disabled ? inputProps.backgroundColor : ''"
						:placeholderClass="inputProps.placeholderClass"
						:placeholderStyle="inputProps.placeholderStyle"
						:confirmType="inputProps.confirmType"
						:focus="inputProps.focus"
						:inputAlign="inputProps.inputAlign"
						:fontSize="inputProps.fontSize"
						:color="inputProps.color"
						:borderColor="inputProps.borderColor"
						:prefixIcon="inputProps.prefixIcon"
						:suffixIcon="inputProps.suffixIcon"
						:suffixIconStyle="inputProps.suffixIconStyle"
						:prefixIconStyle="inputProps.prefixIconStyle"
						:shape="inputProps.shape"
						:customStyle="inputProps.customStyle"
					/>
				</slot>
			</slot>
		</template>
	</u-picker>
</template>

<script>

import props from './props.js';
import mixin from '../../libs/mixin/mixin'
import mpMixin from '../../libs/mixin/mpMixin';
import dayjs from '../../libs/util/dayjs.js';
/**
 * DatetimePicker 时间日期选择器
 * @description 此选择器用于时间日期
 * @tutorial https://uview.d3u.cn/components/datetimePicker.html
 * @property {Boolean}			show				用于控制选择器的弹出与收起 ( 默认 false )
 * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
 * @property {String | Number}	value				绑定值
 * @property {String}			title				顶部标题
 * @property {String}			mode				展示格式 mode=date为日期选择，mode=time为时间选择，mode=year为年选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( 默认 ‘datetime )
 * @property {Number}			maxDate				可选的最大时间  默认值为后10年
 * @property {Number}			minDate				可选的最小时间  默认值为前10年
 * @property {Number}			minHour				可选的最小小时，仅mode=time有效   ( 默认 0 )
 * @property {Number}			maxHour				可选的最大小时，仅mode=time有效	  ( 默认 23 )
 * @property {Number}			minMinute			可选的最小分钟，仅mode=time有效	  ( 默认 0 )
 * @property {Number}			maxMinute			可选的最大分钟，仅mode=time有效   ( 默认 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		各列的默认索引
 * @property {String | Number}  round				是否显示圆角 
 * @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: 'datetime-picker',
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			inputValue: '',
			columns: [],
			innerDefaultIndex: [],
			innerFormatter: (type, value) => value
		}
	},
	watch: {
		show(newValue, oldValue) {
			if (newValue) {
				this.init()
			}
		},
		// #ifdef VUE2
		value(newValue) {
			this.init()
		},
		// #endif
		// #ifdef VUE3
		modelValue(newValue) {
			this.init()
		},
		// #endif
		propsChange() {
			this.init()
		}
	},
	computed: {
		// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
		propsChange() {
			return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, this.value,]
		}
	},
	mounted() {
		
		this.$nextTick(() => {
			this.init()
		})

		if (process.env.NODE_ENV === 'development') {
			// 检测即将过期的功能
			this.checkDeprecatedFeatures([
				{ type: 'slot', name: 'trigger' },
			],'u-datetime-picker','https://uview.d3u.cn/components/datetimePicker.html')
		}
	},
	// #ifdef VUE3
	emits: ['update:modelValue', 'change', 'confirm', 'close', 'cancel'],
	// #endif
	methods: {
		init() {
			let value = ''
			// #ifdef VUE2
			value = this.value;
			// #endif
			// #ifdef VUE3
			value = this.modelValue;
			// #endif

			value = this.$u.os() === 'ios' && this.mode === 'datetime' ? value.toString().replace(/-/g, "/") : value
			this.innerValue = this.correctValue(value)
			this.updateColumnValue(this.innerValue)
		},
		// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
		setFormatter(e) {
			this.innerFormatter = e
		},
		times(n, iteratee) {
			let index = -1
			const result = Array(n < 0 ? 0 : n)
			while (++index < n) {
				result[index] = iteratee(index)
			}
			return result
		},
		// 关闭选择器
		close() {
			if (this.closeOnClickOverlay) {
				this.$emit('close')
			}
		},
		// 点击工具栏的取消按钮
		cancel() {
			this.$emit('cancel')
		},
		// 点击工具栏的确定按钮
		confirm() {
			if(this.showInput){
				this.inputValue = this.getFormatValue(this.innerValue, this.format)
			}

			let innerValue = this.valueFormat ? this.getFormatValue(this.innerValue, this.valueFormat) : this.innerValue
		
			// #ifdef VUE2
			this.$emit('input', innerValue)
			// #endif
			// #ifdef VUE3
			this.$emit('update:modelValue', innerValue)
			// #endif
			this.$emit('confirm', {
				value: innerValue,
				mode: this.mode
			})
		},
		//用正则截取输出值,当出现多组数字时,抛出错误
		intercept(e, type) {
			let judge = e.match(/\d+/g)
			//判断是否掺杂数字
			if (judge.length > 1) {
				uni.$u.error("请勿在过滤或格式化函数时添加数字")
				return 0
			} else if (type && judge[0].length == 4) {//判断是否是年份
				return judge[0]
			} else if (judge[0].length > 2) {
				uni.$u.error("请勿在过滤或格式化函数时添加数字")
				return 0
			} else {
				return judge[0]
			}
		},
		// 列发生变化时触发
		change(e) {
			const { indexs, values } = e
			let selectValue = ''
			if (this.mode === 'time') {
				// 根据value各列索引，从各列数组中，取出当前时间的选中值
				selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
			} else {
				// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
				const year = parseInt(this.intercept(values[0][indexs[0]], 'year'))
				const month = this.mode == "year" ? 1 : parseInt(this.intercept(values[1][indexs[1]]));
				let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
				let hour = 0, minute = 0
				// 此月份的最大天数
				const maxDate = dayjs(`${year}-${month}`).daysInMonth()
				// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
				if (this.mode === 'year-month') {
					date = 1
				}
				// 不允许超过maxDate值
				date = Math.min(maxDate, date)
				if (this.mode === 'datetime') {
					hour = parseInt(this.intercept(values[3][indexs[3]]))
					minute = parseInt(this.intercept(values[4][indexs[4]]))
				}
				// 转为时间模式
				selectValue = Number(new Date(year, month - 1, date, hour, minute))
			}
			// 取出准确的合法值，防止超越边界的情况
			selectValue = this.correctValue(selectValue)
			this.innerValue = selectValue
			this.updateColumnValue(selectValue)
			// 发出change时间，value为当前选中的时间戳
			this.$emit('change', {
				value: selectValue,
				// #ifndef MP-WEIXIN || MP-TOUTIAO
				// 微信小程序不能传递this实例，会因为循环引用而报错
				picker: this.$refs.picker,
				// #endif
				mode: this.mode
			})
		},
		// 更新各列的值，进行补0、格式化等操作
		updateColumnValue(value) {
			this.innerValue = value
			this.updateColumns()
			this.updateIndexs(value)
		},
		// 更新索引
		updateIndexs(value) {
			let values = []
			const formatter = this.formatter || this.innerFormatter;
			const padZero = uni.$u.padZero
			if (this.mode === 'time') {
				// 将time模式的时间用:分隔成数组
				const timeArr = value.split(':')
				// 使用formatter格式化方法进行管道处理
				values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
			} else {
				const date = new Date(value)
				values = [
					formatter('year', `${dayjs(value).year()}`),
					// 月份补0
					formatter('month', padZero(dayjs(value).month() + 1))
				]
				if (this.mode === 'date') {
					// date模式，需要添加天列
					values.push(formatter('day', padZero(dayjs(value).date())))
				}
				if (this.mode === 'datetime') {
					// 数组的push方法，可以写入多个参数
					values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
				}
			}

			// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
			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 = this.times(range[1] - range[0] + 1, (index) => {
					let value = range[0] + index
					value = type === 'year' ? `${value}` : uni.$u.padZero(value)
					return value
				})
				// 进行过滤
				if (this.filter) {
					values = this.filter(type, values)
				}
				return { type, values }
			})

			return results
		},
		// 通过最大值和最小值生成数组
		generateArray(start, end) {
			return Array.from(new Array(end + 1).keys()).slice(start)
		},
		// 得出合法的时间
		correctValue(value) {
			
			if(this.showInput && value){
				this.inputValue = this.getFormatValue(value, this.format)
			}
			
			const isDateMode = this.mode !== 'time'
			if (isDateMode && (!value || !dayjs(value).isValid())) {
				// 获取当前时间
				const now = Date.now()
				// 检查当前时间是否在最大最小时间范围内
				if (now >= this.minDate && now <= this.maxDate) {
					// 如果当前时间在有效范围内，使用当前时间
					value = now
				} else {
					// 如果当前时间不在范围内，使用最小时间为当前时间
					value = this.minDate
				}
			} else if (!isDateMode && !value) {
				// 获取当前时间的小时和分钟
				const now = new Date()
				const currentHour = now.getHours()
				const currentMinute = now.getMinutes()
				
				// 检查当前时间是否在最小最大小时分钟范围内
				if (currentHour >= this.minHour && currentHour <= this.maxHour &&
					currentMinute >= this.minMinute && currentMinute <= this.maxMinute) {
					// 如果当前时间在有效范围内，使用当前时间
					value = `${uni.$u.padZero(currentHour)}:${uni.$u.padZero(currentMinute)}`
				} else {
					// 如果当前时间不在范围内，使用最小时间
					value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`
				}
			}

			// 时间类型
			if (isDateMode) {
				if(/^\d{10}$/.test(value.toString().trim())){
					value = value * 1000
				}
			
				// 如果是日期格式，控制在最小日期和最大日期之间
				value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
				value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
				return value
				} else {
				if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式')
				let [hour, minute] = value.split(':')
				// 对时间补零，同时控制在最小值和最大值之间
				hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
				minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
				return `${hour}:${minute}`
			}
		},
		// 获取每列的最大和最小值
		getRanges() {
			if (this.mode === 'time') {
				return [
					{
						type: 'hour',
						range: [this.minHour, this.maxHour],
					},
					{
						type: 'minute',
						range: [this.minMinute, this.maxMinute],
					},
				];
			}
			const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
			const { minYear, minDate, minMonth, minHour, minMinute, } = 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],
				},
			];

			if (this.mode === 'date') {
				result.splice(3, 2);
			}

			if (this.mode === 'year-month') {
				result.splice(2, 3);
			}

			if (this.mode === 'year') {
				result.splice(1, 4);
			}

			if (this.mode === 'month') {
				result.splice(0, 1);
				result.splice(1, 4);
			}

			return result;
		},
		// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
		getBoundary(type, innerValue) {
			const value = new Date(innerValue)
			const boundary = new Date(this[`${type}Date`])
			const year = dayjs(boundary).year()
			let month = 1
			let date = 1
			let hour = 0
			let minute = 0
			if (type === 'max') {
				month = 12
				// 月份的天数
				date = dayjs(value).daysInMonth()
				hour = 23
				minute = 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()
						}
					}
				}
			}
			return {
				[`${type}Year`]: year,
				[`${type}Month`]: month,
				[`${type}Date`]: date,
				[`${type}Hour`]: hour,
				[`${type}Minute`]: minute
			}
		},
		getFormatValue(value, format) {
			
			if (!value) return ''

			if (format == '') {
				switch (this.mode) {
					case 'day':
						format = 'DD'
						break;
					case 'date':
						format = 'YYYY-MM-DD'
						break;
					case 'time':
						format = 'HH:mm'
						break;
					case 'year':
						format = 'YYYY'
						break;
					case 'year-month':
						format = 'YYYY-MM'
						break;
					case 'datetime':
						format = 'YYYY-MM-DD HH:mm'
						break;
				}
			}
			
			return dayjs(value).format(format)
		}
	},
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';
</style>