Vue3中element plus默认获取最近一周和上个月的时间区间并在后端分开传值

html 复制代码

 <el-form-item label="结算时间：" prop="datetimerangevalue">
                        <el-date-picker
                            v-model="datetimerangevalue"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间" />
                    </el-form-item>

js 复制代码

const datetimerangevalue = ref<TypeAny>([])
// 格式化日期函数
const formatDate = (date: Date) => {
    if (!date) return ''
    const pad = (n: { toString: () => string }) => n.toString().padStart(2, '0')
    const year = date.getFullYear()
    const month = pad(date.getMonth() + 1)
    const day = pad(date.getDate())
    const hours = pad(date.getHours())
    const minutes = pad(date.getMinutes())
    const seconds = pad(date.getSeconds())
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 计算最近一周
const calculateLastWeek = () => {
    const now = new Date()
    const endDate = new Date(now)
    // 从零点到12点开始算起
    // endDate.setHours(23, 59, 59, 999)
  
    const startDate = new Date(now)
    startDate.setDate(now.getDate() - 6)
    // startDate.setHours(0, 0, 0, 0)
    
    datetimerangevalue.value = [ formatDate(startDate) , formatDate(endDate) ]
    
    return [startDate, endDate]
}
// 监听变化
watch(datetimerangevalue, newVal => {
    if (newVal && newVal.length === 2) {
        formModel.select_start_time = String(newVal[0]) 
        formModel.select_end_time = String(newVal[1]) 
    } else {
        formModel.select_start_time = ''
        formModel.select_end_time = ''
    }
})

// 组件挂载时设置默认日期
onMounted(() => {
    const dateRange = calculateLastWeek()
    
    // 直接设置表单值
    formModel.select_start_time = formatDate(dateRange[0])
    formModel.select_end_time = formatDate(dateRange[1])
    getData()

})