组件名: DateRangePicker
vue3
<DateRangePicker
v-model:startTime="dataForm.startTime"
v-model:endTime="dataForm.endTime"
>DateRangePicker>
vue2
<DateRangePicker
:startTime.sync="dataForm.startTime"
:endTime.sync="dataForm.endTime"
>DateRangePicker>
使用双向数据绑定 startTime 绑定开始时间,endTime 绑定结束时间
<template>
<el-date-picker
:shortcuts="rangeShortcuts"
v-bind="$attrs"
v-model="date"
:value-format="valueFormat"
:type="type"
@change="change"
:start-placeholder="startPlaceholder"
:end-placeholder="endPlaceholder"
class="DateRangePicker"
:range-separator="rangeSeparator"
>
el-date-picker>
template>
<script>
import dayjs from 'dayjs'
export default {
name: "DateRangePicker",
emits: ["update:startTime", "update:endTime", "change"],
props: {
type: {
// datetimerange
type: String,
default: "daterange",
},
startTime: [Number, String, Date],
endTime: [Number, String, Date],
valueFormat: {
type: String,
default: "YYYY-MM-DD HH:mm:ss",
},
startPlaceholder: {
type: String,
default: "开始日期",
},
endPlaceholder: {
type: String,
default: "结束日期",
},
rangeSeparator: {
default: "—",
},
},
data() {
return {
rangeShortcuts,
date: undefined,
};
},
computed: {
watchDate() {
return [this.startTime, this.endTime]
}
},
watch: {
watchDate: "watchDateChangeHandler",
},
created() {
this.watchDateChangeHandler();
},
methods: {
change(val) {
let startTime = "";
let endTime = "";
if (val && Array.isArray(val)) {
startTime = val[0];
if (this.type === 'daterange') {
endTime = dayjs(val[1]).endOf('day').format(this.valueFormat)
} else {
endTime = val[1];
}
console.log(' endTime: ', endTime)
}
this.$emit("update:startTime", startTime);
this.$emit("update:endTime", endTime);
this.$emit("change", val);
},
watchDateChangeHandler() {
const { startTime, endTime } = this;
if ((startTime === 0 || startTime) && endTime) {
this.date = [startTime, endTime];
} else {
this.date = undefined;
}
},
},
};
script>