image.png

背景原因

使用的 element-ui 庫中的日期時間選擇器，首次進入頁面，會給個默認的時間(30天時間段)，這時候，拿到的日期并不是很理想，看以下描述：

<el-date-picker class="invoice-query-item"
    v-model="dataVal"
    type="datetimerange"
    @change="getInvoiceData"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss"
    start-placeholder="開始日期"
    end-placeholder="結束日期">
</el-date-picker>

我們只有觸發(fā) change，拿到的日期會進行格式化，跟 value-format 的值綁定的一樣。但是首次進來默認選定的日期并沒有格式化。

// 首次拿到的日期格式
2019-02-10T11:21:25.346Z

// 觸發(fā)change 后拿到的日期格式
2019-02-10 19:21:25

解決辦法

其實就是格式化日期咯～，直接看代碼：

// util.js
export function formatDate(date, fmt) {
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    };
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        }
    }
    return fmt;
};

function padLeftZero(str) {
    return ('00' + str).substr(str.length);
}

// App.vue 頁面引入這個方法
import { formatDate } from './util'
const invoice_end = new Date();
const invoice_start = new Date();
invoice_start.setTime(invoice_start.getTime() - 3600 * 1000 * 24 * 30);

export default {
  data() {
      return {
        dataVal: [formatDate(invoice_start, "yyyy-MM-dd hh:mm:ss"), formatDate(invoice_end, "yyyy-MM-dd hh:mm:ss")],
      }
  }
}