需求：在打开表单页面时，需要给一个初始时间，默认为当天早上9点
1.1.时间标签
<el-form-item prop="planStartTime" label="预计开始时间：" style="font-weight: bold">
<el-date-picker v-model="saveForm.planStartTime" type="datetime" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择预计开始时间" />
</el-form-item>
1.2.初始化代码
const today = new Date()
this.saveForm.planStartTime = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9)
1.3.提交效果：然而请求体日期格式不对，后台报错
{
"id": null,
"name": "是大大大",
"detail": null,
"planStartTime": "2022-11-01T01:00:00.000Z",
"planCompleteTime": "2022-11-01T14:00:00.000Z",
"remark": null
}
原因分析
由于初始化时，给日期设置的类型为 Date，所以如果不在组件上面点击，那么提交的时候还是初始化的 Date 类型，即使设置了 value-format 也不会生效
解决方案
在初始化的时候，就设置为 value-format 的格式，这样即使不在组件上面点击，提交的时候也是 value-format 格式，这样后台解析就不会出问题
改进后代码
2.1.自定义日期工具类
/**
* 获取当天指定第几点
* 比如获取当天九点：hour=9，返回 2022-11-01 09:00:00
*/
getTimeStrByHour: (hour) => {
const today = new Date()
const year = today.getFullYear()
// 月份
let month = today.getMonth() + 1
if (month < 10) month = `0${month}`
// 日期
let day = today.getDate()
if (day < 10) day = `0${day}`
// 组装
return `${year}-${month}-${day} ${hour}:00:00`
}
2.2.初始化代码
this.saveForm.planStartTime = dateUtil.getTimeStrByHour('09')
2.3.点击提交，日期格式正常，ok
{
"id": null,
"name": "搜索",
"detail": null,
"planStartTime": "2022-11-02 09:00:00",
"planCompleteTime": "2022-11-02 22:00:00",
"remark": null
}
