ElementUI日期元件格式化問題

皮格魯斯發表於2017-11-30
UI元件

最近做一個CMS管理系統，採用前後端分離模式。由於前端開發人員排不開期，所以只好我們PHP自己寫頁面。對於我這樣一個連Jqery都不會寫的初級碼農，突然要求用vue寫頁面，著實困難不小。一臉懵逼...兩臉懵逼...雖然寫起來磕磕絆絆，但最後還是如期完工了。至此，我總結了兩點，先說重要的。新接觸任何一個事物，心態要擺正，一定不能產生牴觸心理。再然後是充分理解新事物的核心理念，vue的核心是資料雙向繫結。

到最後，功能雖然實現了，但小問題還有很多。這裡就說說ElementUI日期元件的的坑以及解決方法。關於問題描述，已經有人提出issue，詳情可以參考這個issue。

這裡再描述下問題是怎麼產生的和如何解決的。Date物件使用UTC時間，比北京時間慢8小時。ElementUI的日期元件會在展示的時候自動將UTC時間轉成本地時間，但model仍是UTC時間。可以腦補一副撕逼畫面：運營找開發說，我特麼的明明選擇了這個活動的上線時間是2018年1月1日08時00分00秒，現在都特麼中午了，怎麼還沒自動上線？然後，後端開發查查資料庫發現這個活動的實際開始時間是2018年1月1日16時00分00秒。後端找前端問，是不是你給我傳錯時間了......

現在問題就出在這慢了的8小時。如果前端是個可愛的小妹妹，她會求後端開發在儲存到資料庫之前處理一下她傳過來的這個時間。後端開發樂呵呵地去改了。如果前端是個滿臉鬍子的大老爺們兒......老爺們兒心裡說一句媽賣批，然後自己改。滿臉鬍子的前端一邊寫如下程式碼一邊心裡說，多大點事兒啊！老子分分鐘搞定。

let date = this.createDate;
date = [
  [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'),
  [date.getHours(), date.getMinutes(), date.getSeconds()].join(':')
].join(' ').replace(/(?=\b\d\b)/g, '0');
this.createDate = date;

上邊程式碼能把UTC時間處理成北京時間，但也把時間物件變成了時間字串。看起來沒毛病，但其實有毛病，在vue裡就會有毛病。我們假設this.createDate是日期控制元件繫結的值，起初它是一個物件，在傳給後端之前做了時區轉換，這個繫結的值也從物件變成了字串。雙向繫結、雙向繫結、雙向繫結，所以轉換之後的this.createDate已經不是物件了。當再次提交表單就會提示找不到getFullYear這個方法。

解決這個問題其實非常簡單，我們不要直接改變繫結的這個日期控制元件的值。在傳給後端之前，新定義一個變數let dateTemp，把雙向繫結的this.createDate賦值給新定義變數。然後轉換dateTemp為正確時區。

有新增的地方就有編輯，所以在獲取資料之後先要把時間字串轉換成物件，然後再賦值給繫結的this.createDate。即:


this.createDate = new Date(Date.parse(timestamp.replace(/-/g, "/")))
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章