element-plus 時間日期選擇器 el-date-picker value-format 無效等

vue3.0 配合  element-plus  在使用時間日期選擇時， value-format 無法設置選中值的解決辦法，以及一些零零散散的坑

完整代碼：

<!-- HTML部分 -->
<el-date-picker
    v-model="ruleForm.f_xdsj_time"
    type="datetimerange"
    range-separator="至"
    start-placeholder="開始日期"
    end-placeholder="結束日期"
    @change="timeFn1"
    :default-time="defaultTime"
    format="YYYY-MM-DD"
    class="elDatePicker"
    :clearable="false"
>
</el-date-picker>

/*-- js邏輯部分 --*/

//格式化--時間
function timeStr(dataStr){
    var date = new Date(dataStr);
    var y = date.getFullYear();

    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;

    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;

    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;

    //獲得分
    var mm = date.getMinutes()
    mm = mm < 10 ? ('0' + mm) : mm;

    //獲得秒
    var ss = date.getSeconds()
    ss = ss < 10 ? ('0' + ss) : ss;

    // console.log(y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss)

    return y+'-'+m+'-'+d+' '+h+':'+mm+':'+ss
}

//用戶選定值以后觸發
const timeFn1 = (data)=>{
    console.log(data)
    if(data == null){
        //如果data等於null 則表示用戶點擊了 時間選擇器的清空按鈕，因為 清空按鈕沒有回調函數說以用這個方法來解決
    }else{
        //如果data不等於null 就可以把data的值復給 想要的變量
        ruleForm.XX_begin = timeStr(ruleForm.f_xdsj_time[0])
        ruleForm.XX_end = timeStr(ruleForm.f_xdsj_time[1])
    }
}

//給出默認值--如果需要設置默認的 時分秒 可以用這個方法，修改 后面3位就行，這種寫法不是用來添加默認值的。
const defaultTime = [
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59)
]