Vue封裝DateRangePicker組件流程詳細介紹

更新時間：2022年11月14日 08:42:15 作者：騎上我心愛的小摩托

在后端管理項目中使用vue來進行前端項目的開發(fā)，但我們都知道Vue實際上無法監(jiān)聽由第三方插件所引起的數(shù)據(jù)變化。也無法獲得JQuery這樣的js框架對元素值的修改的。而日期控件daterangepicker又基于JQuery來實現(xiàn)的

前言

日期選擇器在實際使用中，可能會要求默認固定日期、回顯日期或者是時間固定點（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 };
}