//封装组件的页面,该组件带有最近四周的快捷选项,且在选择好开始和结束日期后,会进行校验,若日期时间范围超过30天,则会进行错误提示
<template>
<div>
<el-date-picker
v-model="time"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
clearable
style="margin-right: 20px"
unlink-panels
:picker-options="pickerOptions"
@change="checkTime"
>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
time: [],
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近两周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 21);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
],
},
};
},
methods: {
checkTime() {
console.log('change')
if (this.time) {
const start = new Date(this.time[0]).getTime();
const end = new Date(this.time[1]).getTime();
const dayNum = (end - start) / 1000 / 60 / 60 / 24;
if (dayNum > 30) {
this.time = []
return this.$message.error("日期范围不能超过30天");
}
else{
//选择日期时间成功后,触发自定义事件
this.$emit('dateChange',this.time)
}
}
},
},
};
</script>
//引入组件的页面
import datePicker from "@/components/datePicker/index.vue";
<datePicker @dateChange="handleDateChange" ></datePicker>
//绑定自定义事件,获取选择的日期时间,函数中的time是当前页面data中定义的数据
handleDateChange(value) {
this.time = value;
},