SoFunction
Updated on 2025-03-09

vue gets the timestamp converted to date format code instance

vue gets the timestamp converted to date format.

Method 1 is to reprint Teacher Huang Yi’s format method: Source (Teacher Huang Yi github/ustbhuangyi);

// 
export function formatDate (date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = (RegExp.$1, (() + '').substr(4 - RegExp.$));
  }
  let o = {
    'M+': () + 1,
    'd+': (),
    'h+': (),
    'm+': (),
    's+': ()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = (RegExp.$1, (RegExp.$ === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
};
 
function padLeftZero (str) {
  return ('00' + str).substr();
};
<!-- **.vue -->
<template>
  <!-- timeTimestamp -->
  <div>{{time | formatDate}}</div>
  <!-- Output result -->
  <!-- <div>2016-07-23 21:52</div> -->
</template>
<script>
import {formatDate} from './common/';
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    }
  }
}
</script>

Method 2 is self-written (nine out of ten results produced on Baidu are the above method and do not want to use the above method):

use

<!--  -->
<template>
 <!-- timeFor timestamp -->
 <div>{{time | formatDate}}</div>
 <!-- The result is 2018-01-23 18:31:35 -->
</template>
<script type="text/ecmascript-6">
 export default {
  data() {
   return {
    time: 1516703495241
   };
  },
  filters: {
   formatDate: function (value) {
    let date = new Date(value);
    let y = ();
    let MM = () + 1;
    MM = MM < 10 ? ('0' + MM) : MM;
    let d = ();
    d = d < 10 ? ('0' + d) : d;
    let h = ();
    h = h < 10 ? ('0' + h) : h;
    let m = ();
    m = m < 10 ? ('0' + m) : m;
    let s = ();
    s = s < 10 ? ('0' + s) : s;
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
   }
  }
 };
</script>
<style lang="stylus" rel="stylesheet/stylus">
 
</style>

The above is the detailed explanation and integration of the vue acquisition timestamp conversion to date format introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!