vue中实现：UTC时间格式转换 、时间戳转换 ,2022-05-17 00:00:00 转换为 2022年05月17

vue中实现：UTC时间格式（2021-09-14T19:51:59.000+0800）转换为 yy-mm-dd hh:mm:ss格式 或yy-mm-dd

• 上代码：

// 在main.ts/.js中设置过滤器： 全局utc格式转换为日期格式==》2021-09-14 19:36:10
Vue.filter('formatUTC',function(originVal) {
  const date =  new Date(originVal);
  const y = date.getFullYear();
  const m = "0"+(date.getMonth()+1);
  const d = "0"+date.getDate();
  const h = date.getHours();
  const mm = date.getMinutes();
  const s = date.getSeconds();
  return `${y}-${m.substring(m.length-2,m.length)}-${d.substring(d.length-2,d.length)} ${h}:${mm}:${s}`; // 2021-09-14 19:36:10
  // return `${y}-${m.substring(m.length-2,m.length)}-${d.substring(d.length-2,d.length)}`;  //2021-09-14   
})

• 使用：

<template>
   <el-table
     :data="tableData"
     border
     stripe
     align="center"
     style="width: 100%">
       <el-table-column align="center" prop="statisticalTime" label="报表日期">
         <!-- filter过滤器 转化utc时间格式 -->
         <template slot-scope="scope">
            {{ scope.row.statisticalTime | formatUTC}}
         </template>
       </el-table-column>
  </el-table         
</template>

• 按照上面的代码会出现下面的情况.

调用字符串的.padStart(2, '0')方法补零：

// 设置过滤器： 全局utc时间格式转换 -年月日 时分秒
Vue.filter('formatUTC',function(originVal) {
  const date =  new Date(originVal);
  const y = date.getFullYear();
  const m = "0"+(date.getMonth()+1);
  const d = "0"+date.getDate();
  const h = (date.getHours() + '').padStart(2, '0')
  const mm = (date.getMinutes() + '').padStart(2, '0')
  const ss = (date.getSeconds() + '').padStart(2, '0')
  return `${y}-${m.substring(m.length-2,m.length)}-${d.substring(d.length-2,d.length)} ${h}:${mm}:${ss}`; // 2021-09-14 19:36:10
  // return `${y}-${m.substring(m.length-2,m.length)}-${d.substring(d.length-2,d.length)}`;  //2021-09-14   
})

时间戳转为年月日时分秒 yymmdd hh:mm:ss

// 设置过滤器： 全局时间戳格式转换 -年月日 时分秒
Vue.filter('dateFormat', function (originVal) {
  if (originVal == null || originVal === '') return ''
  const dt = new Date(originVal);
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  const h = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')
  return `${y}-${m.substring(m.length-2,m.length)}-${d.substring(d.length-2,d.length)} ${h}:${mm}:${ss}`; // 2021-09-14 19:36:10
})

年-月-日 时-分-秒 2022-05-17 00:00:00 转换为 2022年05月17

// 年-月-日 时-分-秒 2022-05-17 00:00:00 转换为  2022年05月17
Vue.filter('dateFormatYMD', function (originVal) {
  if (originVal == null || originVal === '') return ''
  const dt = new Date(originVal);
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  return `${y}年${m.substring(m.length - 2, m.length)}月${d.substring(d.length - 2, d.length)}`; // 2021-09-14 19:36:10
})

补充

• 用于测试，后台给返回的utc格式的字符串和过滤器转换为年月日时分秒的时间是否正确.

    getDate(){
      // `new Date()` 是 JavaScript 中的一个内置函数，
      // 用于创建一个新的日期对象，表示当前的日期和时间。它也可以用于创建一个特定日期和时间的新日期对象。
      // Date 对象提供了各种方法和属性来操作和格式化日期和时间。

      const now = new Date();
      const utcTime = now.toISOString();
      console.log(utcTime,'<----输出当前时间的UTC格式字符串','当前new Date()---->',now);
 
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hour = String(now.getHours()).padStart(2, '0');
      const minute = String(now.getMinutes()).padStart(2, '0');
      const second = String(now.getSeconds()).padStart(2, '0');

      const time = `${year}-${month}-${day} ${hour}:${minute}:${second}`

      console.log(time,'<----当前时间年月日时分秒');
    },