Vue封装DateRangePicker组件流程详细介绍

目录

• 前言
• 一、封装el-date-picker
• 二、父组件中进行引用
• 总结

前言

日期选择器在实际使用中，可能会要求默认固定日期、回显日期或者是时间固定点（00:00:00到23:59:59）

一、封装el-date-picker

<template>
	<div>
		<el-date-picker
			@change="handleChange"
			v-model="dateValue"
			type="daterange"
			align="right"
			unlink-panels
			:clearable=false
			value-format="timestamp"
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			:picker-options="pickerOptions"
			:default-time="['00:00:00', '23:59:59']">
		</el-date-picker>
	</div>
</template>
<script>
	export default {
		name: 'DateRangePicker',
		props: {
			defaultTimeRange: {
				type: Object,
				default() {
				return {};
			}
		}
	},
	data() {
		return {
		dateValue: '',
		pickerOptions: {
			shortcuts: [{
				text: '最近一周',
				onClick(picker) {
					const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
					const start = new Date(new Date().toLocaleDateString()); ;
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
					picker.$emit('pick', [start, end]);
				}
			}, 
			{
				text: '最近一个月',
				onClick(picker) {
					const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
					const start = new Date(new Date().toLocaleDateString()); ;
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
					picker.$emit('pick', [start, end]);
				}
			}, 
			{
				text: '最近三个月',
				onClick(picker) {
					const end = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1);
					const start = new Date(new Date().toLocaleDateString()); ;
					start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
					picker.$emit('pick', [start, end]);
					}
				}]
			}
		};
	},
	mounted() {
		this.dateValue = [new Date(this.defaultTimeRange.from), new Date(this.defaultTimeRange.to)];
	},
	methods: {
		handleChange(time) {
			time = time || [];
			this.$emit('handleChange', {start_time: time[0], end_time: time[1]});
		}
	}
};
</script>

二、父组件中进行引用

父组件index.vue

<DateRangePicker @handleChange="handleTime" :default-time-range="defaultTimeRange"/>

<script>
import { generateTodayDefaultTimeRange } from '@/utils/utils';
export default {
	data () {
		return {
			defaultTimeRange: { ...generateTodayDefaultTimeRange() }
		}
	}
	methods:{
		handleTime(time) {
			//console.log(time)获取选择时间
		}
	}
}
</script>

引用JSutils.js

// 今日默认时间范围
export function generateTodayDefaultTimeRange(date = new Date()) {
  const to = formatDateTime(new Date(date.getTime()));
  const from = formatDateTime(new Date(date.getTime()));
  return { from, to };
}

总结

• 综上所述，可见当前日期范围选择器默认时间是今天
• default-time设置时间点固定为起始的00:00:00到23:59:59
• 快捷项也设置成当前模式，自定义起始和结束时间文案
• 当前的获取时间格式为时间戳形式value-format="timestamp"

原文地址：https://blog.csdn.net/cxwtsh123/article/details/127807299