【VUE3 element时间选择器默认选择七天】

news2024/10/5 10:24:52

VUE3 element时间选择器默认选择七天
在这里插入图片描述

<el-date-picker
 v-model="form.timeRange"
 type="datetimerange"
 start-placeholder="开始时间"
 end-placeholder="结束时间"
 format="YYYY-MM-DD HH:mm:ss"
 date-format="YYYY/MM/DD ddd"
 time-format="A hh:mm:ss"
/>
//搜索数据
const form = reactive({
    timeRange:[], // 时间范围,
    startTime: '',
    endTime: ''
})
onMounted(() => {
    form.timeRange = getNowTime()
    ......
})
//默认选中近七天
function getNowTime() {
    // let that=this
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    // console.log([start, end])
    form.startTime= formatDate(start);
    form.endTime = formatDate(end);
    return [start, end]
}
// 时间格式化
function formatDate(date) {
    var myyear = date.getFullYear();
    var mymonth = date.getMonth() + 1;
    var myweekday = date.getDate();
    var h = date.getHours();
    if (mymonth < 10) {
    mymonth = "0" + mymonth;
    }
    if (myweekday < 10) {
    myweekday = "0" + myweekday;
    }
    h = h < 10 ? "0" + h : h;
    var m = date.getMinutes();
    m = m < 10 ? "0" + m : m;
    var s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return (
    myyear + "-" + mymonth + "-" + myweekday + " " + h + ":" + m + ":" + s
    );
}