Vue.js使用filter自定义过滤器对时间进行格式化（javascript原生写法）

一、自定义date.js
/**

• 对Date的扩展，将 Date 转化为指定格式的String
• 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
• 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
• eg:
• “yyyy-MM-dd hh:mm:ss.S” ==> 2006-07-02 08:09:04.423
• “yyyy-MM-dd E HH:mm:ss” ==> 2009-03-10 二 20:09:04
• “yyyy-MM-dd EE hh:mm:ss” ==> 2009-03-10 周二 08:09:04
• “yyyy-MM-dd EEE hh:mm:ss” ==> 2009-03-10 星期二 08:09:04
• “yyyy-M-d hⓂ️s.S” ==> 2006-7-2 8:9:4.18
  */
  function formatDate(date, fmt) {
  let o = {
  ‘M+’: date.getMonth() + 1,//月份
  ‘d+’: date.getDate(), //日
  ‘H+’: date.getHours(),//小时
  “h+”: date.getHours()%12 == 0 ? 12 : date.getHours()%12, //小时
  ‘m+’: date.getMinutes(),//分
  “s+”: date.getSeconds(), //秒
  “q+”: Math.floor((date.getMonth()+3)/3), //季度
  “S” : date.getMilliseconds() //毫秒
  };
  var week = {
  “0” : “日”,
  “1” : “一”,
  “2” : “二”,
  “3” : “三”,
  “4” : “四”,
  “5” : “五”,
  “6” : “六”
  };
  if (/(y+)/.test(fmt)) {
  fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ‘’).substr(4 - RegExp.$1.length));
  }
  if(/(E+)/.test(fmt)){
  fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.KaTeX parse error: Expected 'EOF', got '}' at position 69: …); }̲ for (let k i…{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);
  }
  // filter过滤器（必须先引入Vue.js）
  Vue.filter(‘dateFormat’, function (date, format=‘yyyy-MM-dd HH:mm:ss’) {
  return formatDate(date,format);
  })
  二、在页面中引入date.js，然后调用时间格式化过滤器

时间格式化(Vue过滤器)

显示格式化的日期时间

原始时间：{{time}}

默认格式: {{time | dateFormat}}

年月日: {{time | dateFormat('yyyy-MM-dd')}}

年月日 时分秒 周几: {{time | dateFormat('yyyy-MM-dd hh:mm:ss EE')}}

年月日 时分秒 星期: {{time | dateFormat('yyyy-MM-dd hh:mm:ss EEE')}}