前端转换时间格式

1.以下方法可以直接挂载到,Date() 原型上,也可以自己封装成一个方法,那个组件使用就在那个组件引入,调用

以下以在vue中挂在到Date()原型上为例

Date.prototype.format = function (format) {
    var o = {
      "M+": this.getMonth() + 1, //month
      "d+": this.getDate(), //day
      "h+": this.getHours(), //hour
      "m+": this.getMinutes(), //minute
      "s+": this.getSeconds(), //second
      "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
      "S": this.getMilliseconds() //millisecond
    }
    if (/(y+)/.test(format)) {
      format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
  
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(format)) {
        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
      }
    }
    return format;
  }

你可以,直接在vue得main.js中直接引入以上代码,如果你觉得一大段不好看,你可以放到一个js文件里面,像我这样子引入一下

在main.js这样子引入一下就可以
import format from './util/XXX'




//使用方法(可以在任何地方这样子使用)
new Date()里面传入你需要转化得时间,format()里面是你要需要的时间格式

new Date('这里是你要转化得时间').format('yyyy-MM-dd hh-mm-ss')

当然了,你也可以选择封装成方法

export function dateFormat(date, format) {
  format = format || 'yyyy-MM-dd hh:mm:ss';
  if (date !== 'Invalid Date') {
    let o = {
      "M+": date.getMonth() + 1, //month
      "d+": date.getDate(), //day
      "h+": date.getHours(), //hour
      "m+": date.getMinutes(), //minute
      "s+": date.getSeconds(), //second
      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
      "S": date.getMilliseconds() //millisecond
    }
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
      (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (let k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1,
          RegExp.$1.length === 1 ? o[k] :
            ("00" + o[k]).substr(("" + o[k]).length));
    return format;
  }
  return '';

}

也是直接放到js文件,不过使用时候就要,哪里用哪里调用,用按需引入你要使用得组件后,直接调用,参数一是你要改变得时间,参数二就是所需要得时间格式

2.第二中方法就是使用moment包

安装
npm install moment -s

在main.js写这两行代码(挂载到vue原型)

import moment from "moment";
Vue.prototype.$moment = moment;

在页面中的应用
this.$moment(Time).format("YYYY-MM-DD");



或者不挂载,随用随引
import moment from 'moment';
 
moment().format('YYYY-MM-DD'); 
moment().format('YYYY.MM.DD hh:mm:ss'); 
moment().format('YYYY年MM月DD日 hh:mm:ss') 
moment().year(); 
moment().month() + 1;
moment().date(); 
moment().hour(); 
moment().minute(); 
moment().second(); 
moment().millisecond();