elelemet+vue3 实现日期范围

最新推荐文章于 2024-08-23 08:41:24 发布

小菜鸟码住

最新推荐文章于 2024-08-23 08:41:24 发布

阅读量371

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/hfyldx/article/details/132050403

版权

				<el-date-picker
								style="width: 100%"
								@change="datePickerValueChange"
								v-model="datePickerValue"
								format="YYYY-MM-DD"
								value-format="YYYY-MM-DD"
								type="daterange"
								range-separator="至"
								start-placeholder="申请出入开始时间"
								end-placeholder="申请出入结束时间"
							/>

const datePickerValue = ref<any>([]);
//点击选择时间触发的方法
const datePickerValueChange = (v: any) => {
	datePickerValue.value = v;
	//将时间选择器的值赋值给表单
	if (v.length > 0) {
		formData.value.validBegin = v[0];
		formData.value.validEnd = v[1];
	} else {
		formData.value.validBegin = "";
		formData.value.validEnd = "";
	}
	formData.value.datePickerValue = v;
};

渲染（接口）
getData（）{
	datePickerValue.value = [formData.value.validBegin, formData.value.validEnd];
		formData.value.datePickerValue = datePickerValue.value;
		}
保存处理一下日期
save(){
	formData.value.datePickerValue = formData.value.datePickerValue.filter((item: any) => {
		return item != "";
	});
	}