前端坑-初始化日期導致 el-date-picker value-format 屬性失效

需求:在打開表單頁面時地消,需要給一個初始時間蚣旱,默認為當天早上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
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末搭盾,一起剝皮案震驚了整個濱河市咳秉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鸯隅,老刑警劉巖澜建,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蝌以,居然都是意外死亡炕舵,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門跟畅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來咽筋,“玉大人,你說我怎么就攤上這事徊件〖楣ィ” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵虱痕,是天一觀的道長睹耐。 經(jīng)常有香客問我,道長部翘,這世上最難降的妖魔是什么疏橄? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮略就,結(jié)果婚禮上捎迫,老公的妹妹穿的比我還像新娘。我一直安慰自己表牢,他們只是感情好窄绒,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著崔兴,像睡著了一般彰导。 火紅的嫁衣襯著肌膚如雪蛔翅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天位谋,我揣著相機與錄音山析,去河邊找鬼。 笑死掏父,一個胖子當著我的面吹牛笋轨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赊淑,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼爵政,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了陶缺?” 一聲冷哼從身側(cè)響起钾挟,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎饱岸,沒想到半個月后掺出,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡苫费,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年汤锨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片黍衙。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖荠诬,靈堂內(nèi)的尸體忽然破棺而出琅翻,到底是詐尸還是另有隱情,我是刑警寧澤柑贞,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布方椎,位于F島的核電站,受9級特大地震影響钧嘶,放射性物質(zhì)發(fā)生泄漏棠众。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一有决、第九天 我趴在偏房一處隱蔽的房頂上張望闸拿。 院中可真熱鬧,春花似錦书幕、人聲如沸新荤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽苛骨。三九已至篱瞎,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痒芝,已是汗流浹背俐筋。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留严衬,地道東北人澄者。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像瞳步,于是被迫代替她去往敵國和親闷哆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容