日期组件

html页面

<template>
	<div class="flex-box">
		<div class="radio-item">
			<m-radio-group v-model:value="timeSlot" button-style="solid" @click="onTimeSlotChange">
				<m-radio-button v-for="(item, index) in presets" :value="index" :key="index">
					{{ index }}
				</m-radio-button>
			</m-radio-group>
		</div>
		<div class="date-item">
			<!-- 时间选择器加快捷选项 -->
			<m-form-item label="" name="dateRange">
				<m-range-picker
					v-model:value="dateRange"
					:allowClear="false"
					:ranges="presets"
					:get-popup-container="triggerNode => triggerNode.parentNode"
					format="YYYY-MM-DD HH:mm:ss"
					value-format="YYYY-MM-DD HH:mm:ss"
					style="width: 350px"
					@change="onDataTimeChange"
					@openChange="onPannelToggle"
				/>
				<!-- <m-button class="ml-8" @click="onRest">
					<template #icon>
						<undo-outlined />
					</template>
				</m-button> -->
			</m-form-item>
		</div>
	</div>
</template>

<script lang="ts" src="./index"></script>

<style lang="less" scoped>
.flex-box {
	display: flex;
	justify-content: flex-end;
	.radio-item {
		width: 450px;
	}
}
</style>
 

TS

	setup(props, { emit }) {
		const constants = {};

		const presets = getFastDateRange();

		const state = reactive<StateModel>({
			timeSlot: '1天',
			dateRange: presets['1天'],
			rankingDateRange: [dayjs().subtract(1, 'year'), dayjs()],
			searchForm: {
				startTime: '',
				endTime: ''
			},
			// 时间快捷项
			presets: presets,
			selectFlag: false
		});

		const methods = {
			/**
			 * 时间范围变化
			 */
			onDataTimeChange() {
				methods.calcTime();
				state.selectFlag = true;
				methods.onSearch();
			},

			/**
			 * 搜索
			 */
			onSearch() {
				emit('search', MUtils.deepClone(state.searchForm));
			},
			/**刷新 */
			// onRest() {},
			initDate() {
				const startTime = dayjs(state.dateRange[0]).format(DEFAULT_TIME_FORMAT);
				const endTime = dayjs(state.dateRange[1]).format(DEFAULT_TIME_FORMAT);
				state.searchForm.startTime = startTime;
				state.searchForm.endTime = endTime;

				methods.onSearch();
			},

			onPannelToggle(status) {
				if (status) {
					state.presets = getFastDateRange();
				}
			},

			/**
			 * 改变时间
			 */
			onTimeSlotChange(val) {
				if (val.target.tagName === 'SPAN') {
					return;
				}
				console.log(val.target.value, 'val.target.value');

				const presets = getFastDateRange();
				state.presets = presets;
				state.selectFlag = false;
				state.dateRange = state.presets[val.target.value];

				const startTime = dayjs(state.dateRange[0]).format(DEFAULT_TIME_FORMAT);
				const endTime = dayjs(state.dateRange[1]).format(DEFAULT_TIME_FORMAT);
				state.searchForm.startTime = startTime;
				state.searchForm.endTime = endTime;

				// console.log(state.dateRange, 'state.dateRange ');
				// console.log(startTime, endTime);
				// console.log(state.searchForm, 'state.searchFormstate.searchFormstate.searchForm');

				methods.onSearch();
			},
			calcTime() {
				const targetDate = state.dateRange;
				const dateStart = targetDate[0] || '';
				const dateEnd = targetDate[1] || '';

				if (dateStart && dateEnd) {
					const diffType = dayjs(dateEnd).diff(dayjs(dateStart), 'hour');

					// 小于24， 单位为小时
					if (diffType === 0) {
						state.timeSlot = '15分钟';
					} else if (diffType < 24) {
						state.timeSlot = dayjs(dateEnd).diff(dayjs(dateStart), 'hour') + '小时';
					} else {
						state.timeSlot = dayjs(dateEnd).diff(dayjs(dateStart), 'day') + '天';
					}
				}
				const startTime = dayjs(state.dateRange[0]).format(DEFAULT_TIME_FORMAT);
				const endTime = dayjs(state.dateRange[1]).format(DEFAULT_TIME_FORMAT);
				state.searchForm.startTime = startTime;
				state.searchForm.endTime = endTime;
				console.log(state.timeSlot, state.dateRange, '=============');
			}
		};

		watch(
			() => props,
			() => {
				if (props.searchParams.startTime) {
					state.dateRange = [dayjs(props.searchParams.startTime), dayjs(props.searchParams.endTime)];
					state.searchForm = props.searchParams;
				}
				methods.calcTime();
			},
			{
				deep: true,
				immediate: true
			}
		);

		return {
			...toRefs(props),
			...toRefs(state),
			...constants,
			...methods
		};
	}

调用方法

export const getFastDateRange = (): Record<string, [Dayjs, Dayjs]> => {
	const now = dayjs();

	return {
		'15分钟': [now.subtract(15, 'minute'), now],
		'3小时': [now.subtract(3, 'hour'), now],
		'6小时': [now.subtract(6, 'hour'), now],
		'12小时': [now.subtract(12, 'hour'), now],
		'1天': [now.subtract(1, 'day'), now],
		'3天': [now.subtract(3, 'day'), now],
		'7天': [now.subtract(7, 'day'), now]
	};
};