JS和Vue前端时间格式化处理的两种方式推荐

方式一 dayjs库

1.首先在vue项目中安装dayjs

npm install dayjs--save

2. 定义时间格式化全局过滤器，在utils文件夹下创建date-format.ts中编写代码

import dayjs from dayjs

import utc from dayjs/plugin/utc
// 将utc转化dayjs支持的样式
dayjs.extend(utc)

const DATE_TIME_FORMAT = YYYY-MM-DD HH:mm:ss

export function formatUtcString(utcString: string, format: string = DATE_TIME_FORMAT) {
          
   
  return dayjs.utc(utcString).format(format)
}

3.在全局定义

import {
          
    App } from vue
import {
          
    utcToDateTimeFormat } from @/utils/date-formt

function registerGlobalProperties(app: App) {
          
   
  app.config.globalProperties.$filters = {
          
   
    formatTime(value: string) {
          
   
      return utcToDateTimeFormat(value)
    }
  }
}
export default registerGlobalProperties

4.使用

<span>{
          
   {
          
    $filters.formatTime(scope.row.createAt) }}</span>

方式二 moment库

1.首先在vue项目中安装moment

npm install moment --save

2. 定义时间格式化全局过滤器，在dateUtil.js中或组件中导入该组件

import moment from moment
dateUtil.js代码：

import moment from "moment";
 
function dateFormat(data) {
          
   
 
    return moment(new Date(data).getTime()).format(YYYY-MM-DD HH:mm);;
 
}
 
export {
          
   
 
    dateFormat
 
}

3. 使用方法一

3.1在全局中定义时间格式化

// 定义一个全局过滤器实现日期格式化
 
Vue.filter(datefmt, function (input, fmtstring) {
          
   
 
  return moment.unix(input).format(fmtstring)
 
})

3.2在main.js中或组件中导入该组件

import moment from moment
这样就可以在我们需要对时间进行格式化的组件中进行使用了，如下：

<div>
 
    <span>{
          
   {
          
   item.publishdate | datefmt(MM/DD)}}</span>
 
    <span>{
          
   {
          
   item.publishdate | datefmt(YYYY)}}</span>
 
</div>

这里我有两个span标签，第一个是将时间戳格式为 月/日（11/24） 这样的格式，第二个则是格式化为年份值（如2018这样的）