当前位置：首页 > news >正文

封装日期选择器组件，带有上周，下周按钮

news 2025/9/10 6:54:36

ui图

在这里插入图片描述
组件代码如下：

<template><div><el-date-pickerv-model="dateRange"type="daterange"align="right"size="mini":editable="false"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"format="yyyy-MM-dd"@change="handleDateChange":readonly="true"></el-date-picker><el-button-group><el-button size="mini" @click="prevWeek" style="margin-right: 5px;">上一周</el-button><el-button size="mini" @click="nextWeek">下一周</el-button></el-button-group></div>
</template><script>
export default {name: 'DateRangePicker',props: {value: {type: Array,default: () => []}},data() {return {dateRange: this.value.length ? [...this.value] : this.getDefaultWeekRange(),};},watch: {value(newVal) {if (newVal.length) {this.dateRange = [...newVal];}}},methods: {getDefaultWeekRange() {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);return [start, end];},handleDateChange(val) {if (val && val.length === 2) {const formattedVal = [this.formatDate(val[0]),this.formatDate(val[1])];this.$emit('input', formattedVal);this.$emit('change', formattedVal);} else {this.$emit('input', val);this.$emit('change', val);}},formatDate(date) {if (!date) return '';const d = new Date(date);const year = d.getFullYear();const month = String(d.getMonth() + 1).padStart(2, '0');const day = String(d.getDate()).padStart(2, '0');return `${year}-${month}-${day}`;},prevWeek() {const [start, end] = this.dateRange;const newStart = new Date(start);const newEnd = new Date(end);newStart.setDate(newStart.getDate() - 7);newEnd.setDate(newEnd.getDate() - 7);this.dateRange = [newStart, newEnd];this.handleDateChange(this.dateRange);},nextWeek() {const [start, end] = this.dateRange;const newStart = new Date(start);const newEnd = new Date(end);newStart.setDate(newStart.getDate() + 7);newEnd.setDate(newEnd.getDate() + 7);this.dateRange = [newStart, newEnd];this.handleDateChange(this.dateRange);}}
};
</script><style scoped>
.date-range-picker {display: flex;align-items: center;
}
.el-button-group {margin-left: 10px;
}
</style>

如何调用组件

<template><date-range-picker v-model="dateRange" @change="handleDateChange" />
</template><script>
import DateRangePicker from '@/views/components/DateRangePicker.vue';export default {components: { DateRangePicker },data() {return {dateRange: []};},methods: {handleDateChange(range) {console.log('日期范围变化:', range);}}
};
</script>