vue Element UI 日期時間選擇器獲取格式問題
阿新 • • 發佈:2019-02-08
問題:在使用element ui的時候由於是表單提交,所以使用了rule規則驗證。如下:
<el-date-picker v-model="form.leaveTime" type="datetime" placeholder="選擇日期時間"></el-date-picker>
rules: {
leaveTime: [
{
type: "date",
required: true,
message: "請選擇時間",
trigger: "change"
}
]
}
經過雙向繫結,獲取到的時間日期在提交表單的時候獲取到引數為:
而控制檯列印的引數為:
和要求的格式不一致,導致請求404 。
查看了官網文件,
value-format="yyyy-MM-dd HH:mm:ss"
可以格式化獲取到的value,於是乎直接寫了一下程式碼:
<el-date-picker v-model="form.leaveTime" type="datetime" placeholder="選擇日期時間" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
控制檯列印到的value正是我想要的,但是卻出現了一下問題:選擇好時間後直接報錯,並且點選確定,也是同樣的錯誤。
在確定這樣寫沒錯的情況下,查了資料才發現是因為前面我設定了rule,rule的驗證規則是change,而這裡的value-format也是change,就導致了getTime的衝突,於是乎直接註釋掉,該項的rule規則,不會再報錯了,並且時間格式也能正常轉換。
但是這是出現的問題是,我設定的驗證沒了。 重新設定了以下程式碼進行驗證以此解決了這個問題
leaveTime: [
{
// 註釋掉type和trigger,是為了解決格式化時間日期的時候出現的bug
// type: "date",
required: true,
message: "請選擇時間"
// trigger: "change"
}
]