需求分析

分析：
我們通常會遇到這種情況，當我們制作一個表單頁面的時候，通常會有添加和編輯的情況，我們在提交的時候還需要將時間的格式轉換為字符串格式進行傳參。

在這里我們使用的是 iview 中的 DatePicker type格式為datetime可選擇日期和時間

添加頁面

在添加頁面中相對簡單很多 因為插件具有 @on-change 時間 時間的參數就是當前選中的時間字符串格式的 所以我們只需要在這個事件中賦值即可

首先我們進行了雙向綁定 然后綁定事件

在事件中我們只需要將time參數傳遞給對應變量即可 下圖查看效果

當我們選擇對應時間的時候輸出的time為字符串格式的時間 所以我們的賦值也搞定了
下面來看一個麻煩的編輯頁面

編輯頁面

上面的添加頁面很簡單 我們只需要通過 change 事件進行賦值即可 但是在編輯頁面中 我們跳轉到編輯頁面然后獲取詳情 并綁定到時間插件上面 這時候我們不對時間進行選擇 也就不觸發change事件了 所以當我們提交的時候看一下輸出

通過獲取詳情已經復制給了日期插件 并沒有觸發change事件 我們點擊確定按鈕輸出的是實踐對象 但是如果用戶進來更改了時間 進而觸發change事件后 時間格式又成為了字符串 所以我們再次需要判斷是否為字符串類型的格式在選擇性的進行格式化

推薦以下

export function parseTime(time, cFormat) {if (arguments.length === 0) {return null}const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if (('' + time).length === 10) time = parseInt(time) * 1000date = new Date(time)}const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()}const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {let value = formatObj[key]if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]if (result.length > 0 && value < 10) {value = '0' + value}return value || 0})return time_str}

• 首先我們引入到使用組件中
  
• 如果要轉化的值不為空則進行格式化
  
  在這里我們不用考慮當前時間的格式 當前用戶有沒有選擇時間 因為在上面的parseTime方法中我們進行了判斷
  
  這樣就可以了