前端坑-初始化日期导致 el-date-picker value

需求：在打开表单页面时，需要给一个初始时间，默认为当天早上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
}