前言：由于el-date-picker返回的是一个数组且没有格式化，使用起来并不是很方便，所有个人稍微封装了下，写的不好，有问题请多指教！

vue_2">第一步 新建vDatePicker.vue

<template>
	<el-date-picker 
		v-model="Times"  
		type="daterange" 
		:range-separator="rangeName" 
		:start-placeholder="startName"
		:end-placeholder="endName" 
		@change="getTime">
	</el-date-picker>
</template>

<script>
	import {
		ref,
	} from "vue";
	import utils from "../utils/utils.js"//这边日期格式的代码就不展示了，这个比较简单哈
	export default {
		props:{
			rangeName:{
				type:String,
				default:'至'
			},
			startName:{
				type:String,
				default:'开始日期'
			},
			endName:{
				type:String,
				default:'结束日期'
			},
		},
		setup(props,{ slots, attrs, emit }){
			  const Times = ref([]);
			  const getTime = ()=>{
				  if(Times.value && Times.value.length>0){
					let arr =[utils.dateFormat(Times.value[0]),utils.dateFormat(Times.value[1])];
					emit('itemChange', arr)
				  }else{
				  	emit('itemChange', [])
				  }
			  }
			  return{
				  Times,
				  getTime
			  }
			
		}
	}
</script>

<style>
</style>

第二步在父组件引用

<template>
	<!-- 可以根据自己的需求动态设置，组件中也设置了默认值 -->
	<!-- :rangeName="至" -->
	<!-- :startName="**开始日期" -->
	<!-- :endName:"**结束日期" -->
	<v-date-picker  @itemChange="getTime"/>
</template>
<script>
	import {
		ref,
		reactive,
		getCurrentInstance,
		h
	} from "vue";
	import {
		useStore
	} from "vuex";
	import {
		ElMessage,
		ElMessageBox
	} from "element-plus";
	import {
		getUserInfo
	} from "../../utils/auth.js"
	import utils from "../../utils/utils.js"
	import vPagination from '../../components/pagination.vue';
	import vTable from '../../components/table.vue';
	import vDatePicker from '../../components/vDatePicker.vue';
	export default {
		name: "records",
		components: {
			vPagination,
			vTable,
			vDatePicker
		},
		setup() {
			const config = reactive({
				loading:true,
				tableText:'',
				pageTotal:0,
				query:{
				//这边是我自己项目中用到的一些参数，根据自己的需求修改
					contractNos: '',
					repayStatus: "",
					repayTimeStart: '',
					repayTimeEnd: '',
					page: 1,
					limit: 10, //page第几页,limit是一页几个
				}
			});
			
			/这里给开始时间和结束时间赋值
			const getTime = (e)=>{
				config.query.repayTimeStart = e[0];
				config.query.repayTimeEnd = e[1];
			}
			
			
			return {
				getTime
			};
		},
	};
</script>

script setup 写法

<template>
	<el-date-picker v-model="Times" type="daterange" :range-separator="rangeName" :start-placeholder="startName"
		:end-placeholder="endName" @change="getTime">
	</el-date-picker>
</template>

<script setup>
	import {
		ref,
		//defineProps,defineEmits 是一个编译器宏，不再需要导入
	} from "vue";
	import utils from "../utils/utils.js"
	defineProps({
		rangeName: {
			type: String,
			default: '至'
		},
		startName: {
			type: String,
			default: '开始日期'
		},
		endName: {
			type: String,
			default: '结束日期'
		},
	})

	const Times = ref([]);
	const emit = defineEmits(['itemChange'])
	const getTime = () => {
		if (Times.value && Times.value.length > 0) {
			let arr = [utils.dateFormat(Times.value[0]), utils.dateFormat(Times.value[1])];
			emit('itemChange', arr)
		} else {
			emit('itemChange', [])
		}
	}
</script>

<style>
</style>