记录element+ 双日期选择器双向绑定的坑

247 阅读1分钟

首先v-model屁用没有,采用的是@calendar-change + type="daterange"的组合,能在calendar-change事件拿到回调的参数,赋值给form.date
这里要小心,一定要吧获取的Date数据格式化一下,不然怎么也绑不上,会出各种bug

//template
    <el-date-picker
        :model-value="[ruleForm.cardStartDate, ruleForm.cardEndDate]"
        type="daterange"
        range-separator="→"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @calendar-change="hcheckedDate"
    />
    
//script setup
    const ruleForm = ref({cardStartDate: '', cardEndDate: ''})
    const hcheckedDate = (e) => {
        ruleForm.value.cardStartDate = new Date(e[0]).toLocaleDateString
        ruleForm.value.cardEndDate = new Date(e[1]).toLocaleDateString
    }