1. 程式人生 > 其它 >Element 日期選擇器 DateTimePicker 提交到後端發現少一天的問題

Element 日期選擇器 DateTimePicker 提交到後端發現少一天的問題

先看解決辦法

新增:value-format="yyyy-MM-dd"

 

再來看問題本身,其實不是DateTimePicker元件的問題,這個問題是Date.prototype.toJSON

當Date物件通過JSON.stringify方法序列化時會呼叫原型的toJSON方法,

Date.prototype.toJSON 這個方法根據官方文件(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/toJSON)

它是呼叫toISOString()方法,這個方法會將本地時間轉換UTC時間再序列化,如果你的計算機時區是北京時間,那麼序列化後會少八個小時,那麼為什麼加value-format="yyyy-MM-dd" 屬效能解決問題呢,因為加了這個屬性後,欄位的資料型別是String型別,不再是Date型別,所以不會呼叫原型鏈上的toJSON方法,但不是最終的解決辦法,

所以最終的解決方法是重寫Date.prototype.toJSON方法

import dayjs from 'dayjs'
Date.prototype.toJSON=function(){
    return dayjs(this).format('YYYY-MM-DDTHH:mm:ss.SSSZ');
}