vue js日期时间格式化

前言

使用vue开发中，后台传过来的数据含有时间日期的通常前端都要做进一步做处理或者格式化，常用的是使用filter来过滤数据，换一种思路，前端拿到的时间日期数据一般是一串数字的时间戳，或者是一个字符串的时间日期，所以我们可以在 String 和 Number 里定义一个格式化函数，从而实现格式化时间日期。

---

// /utils/index.js
function dateFormatInit() {
  String.prototype.dateFormat = Number.prototype.dateFormat = function(
    fmt = "yyyy-mm-dd HH:MM:SS"
  ) {
    let date = new Date(this);
    let fmtDate = fmt;
    // 转化时间
    let o = {
      "y+": date.getFullYear(),
      "m+": date.getMonth() + 1,
      "d+": date.getDate(),
      "H+": date.getHours(),
      "M+": date.getMinutes(),
      "S+": date.getSeconds()
    };

    for (let key in o) {
      // 正则
      let rep = new RegExp(`${key}`);

      // 是所需要的格式
      if (rep.test(fmt)) {
        fmtDate = fmtDate.match(rep) // 有匹配到所对应格式
          ? fmtDate.replace(
              fmt.match(rep)[0], // 将原来的格式进行值的替换 例如 yyyy - 2019
              // String(o[key]).padStart(fmt.match(rep)[0].length, "0") // ES2017写法
              String(o[key]).length === 1 ? `0${o[key]}` : `${o[key]}` // 例 小时为 7 时，在前面加上 0 ，变成 07
            )
          : "";
      }
    }

    return fmtDate;
  };
}
dateFormatInit();

// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/utils/";

Vue.config.productionTip = false;

let a = 1560722201293; // 时间戳
let b = "2019/05/05 07:15:10"; // 字符串 时间日期

console.log(a.dateFormat("yyyy-mm-dd"));
console.log(b.dateFormat("yyyy-mm-dd HH:MM:SS"));

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");