jnpf_app/components/Jnpf/DateRange/index.vue

<template>
	<view class="jnpf-date-range">
		<JnpfDatePicker v-if="type=='date'" v-model="startValue" placeholder="开始日期" :disabled="disabled"
			inputType="text" scene="searchList" :format="format" @change="change" :defaultTime="startDefaultTime"
			selectType='start' :key="key" ref="dateTime" />
		<JnpfTimePicker v-else v-model="startValue" placeholder="开始时间" :disabled="disabled" inputType="text"
			scene="searchList" :format="format" @change="change" :defaultTime="startDefaultTime" selectType='start'
			:key="key" ref="dateTime" />

		<view class="u-p-l-10 u-p-r-10">至</view>

		<JnpfDatePicker v-if="type=='date'" v-model="endValue" placeholder="结束日期" :disabled="disabled" inputType="text"
			scene="searchList" :format="format" @change="change" :defaultTime="endDefaultTime" selectType='end'
			:key="key+1" ref="dateTime" />
		<JnpfTimePicker v-else v-model="endValue" placeholder="结束时间" :disabled="disabled" inputType="text"
			scene="searchList" :format="format" @change="change" :defaultTime="endDefaultTime" selectType='end'
			:key="key+1" ref="dateTime" />
	</view>
</template>
<script>
	const DEFAULT_FORMAT = 'yyyy-mm-dd hh:MM:ss';
	export default {
		name: 'jnpf-date-range',
		props: {
			modelValue: {
				type: [Array, String],
				default: () => []
			},
			placeholder: {
				type: String,
				default: '请选择日期范围'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			format: {
				type: String,
				default: 'yyyy-MM-dd HH:mm:ss'
			},
			type: {
				type: String,
				default: 'date'
			}
		},
		data() {
			return {
				startDefaultTime: '',
				endDefaultTime: '',
				startValue: '',
				endValue: '',
				datetimerange: [],
				datetimerangeObj: {},
				key: +new Date()
			}
		},
		watch: {
			modelValue: {
				handler(val) {
					if (Array.isArray(val) && val.length) {
						// 当 modelValue 是有效数组时，更新本地状态
						this.startValue = val[0];
						this.endValue = val[1];
						this.$set(this.datetimerangeObj, 'start', val[0]);
						this.$set(this.datetimerangeObj, 'end', val[1]);
					} else {
						// 清空本地状态
						this.startValue = '';
						this.endValue = '';
						this.datetimerangeObj = {};
						this.datetimerange = [];
						// 仅当 val 不是空数组时，才触发更新
						if (!Array.isArray(val) || val.length !== 0) {
							this.$emit('update:modelValue', []);
						}
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			change(e, type) {
				this.datetimerange = [];
				this.$set(this.datetimerangeObj, type, e || '');

				// 始终使用开始时间作为参考时间
				const startValue = this.datetimerangeObj.start;
				this.setDefaultTime(startValue);

				this.handleValue();
			},
			setDefaultTime(value) {
				this.$refs.dateTime.defaultTime = this.type === 'time' ? value : this.$u.timeFormat(value, DEFAULT_FORMAT);
			},
			handleValue() {
				const {
					start,
					end
				} = this.datetimerangeObj;
				this.datetimerange = [start, end];

				if (this.shouldValidate()) {
					if (start > end) {
						this.handleInvalidRange();
						return;
					}
				}

				this.emitUpdate();
			},
			shouldValidate() {
				return this.datetimerangeObj.start && this.datetimerangeObj.end;
			},

			handleInvalidRange() {
				this.$u.toast('开始时间不能大于结束时间');
				this.clearValues();
			},

			clearValues() {
				setTimeout(() => {
					this.startValue = "";
					this.endValue = "";
					this.datetimerangeObj = {};
					this.datetimerange = [];
					this.emitUpdate();
					this.refreshComponent();
				}, 500);
			},

			emitUpdate() {
				this.$emit('update:modelValue', this.datetimerange);
			},

			refreshComponent() {
				this.key = +new Date();
			}
		}
	}
</script>