需求:在打開表單頁面時地消,需要給一個初始時間蚣旱,默認為當天早上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
}
原因分析
由于初始化時您单,給日期設(shè)置的類型為 Date,所以如果不在組件上面點擊千康,那么提交的時候還是初始化的 Date 類型享幽,即使設(shè)置了 value-format 也不會生效
解決方案
在初始化的時候,就設(shè)置為 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
}