Vue中moment(时间格式化)插件的使用

第一步:使用npm安装moment

npm install moment --save

第二步:在main.js中引入,定义一个全局过滤器,并挂载vue实例

// 引入
import moment from "moment";
// 定义过滤器
Vue.filter("moment", function (value, formatString) {
  return moment(value).format(formatString);
});
// 挂载(这里我匹配了日期格式,这样的话能提高代码复用性)
Vue.prototype.$timeFormat = function (value) {
  // 匹配日期格式：yyyy-MM-dd 
  const timeRegex = /^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))$/;
  // 匹配日期格式: yyyy-MM-dd HH:mm:ss
  const timeRegex1 =  /^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))\\s+([0-1]?[0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
  const flag1 = timeRegex.test(value)
  const flag2 = timeRegex1.test(value)
  let formatString = flag1 == true && flag2 == false ? "YYYY-MM-DD" : (flag1 == false && flag2 == true ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD HH:mm:ss");
  return moment(value).format(formatString);
};

第三步,使用

let startTime = this.$timeFormat(this.recordForm.startTime)// 输出为2022-3-29 10:00:00
let endTime = this.$timeFormat(this.recordForm.endTime)

中间遇到的问题:

我一开始按照这位前辈的方法使用,(38条消息) vue中使用moment.js(时间格式化插件)_有蝉的博客-CSDN博客_vue时间格式化插件

但是报错xxx.format not a function,后来改成我上面的方式就不报错了.