教你如何轻松应对时间格式化处理问题

水星记_

已于 2023-09-25 15:56:31 修改

阅读量2.8k

点赞数 4

分类专栏：组件封装文章标签：前端 vue

于 2022-01-12 13:51:23 首次发布

本文链接：https://blog.csdn.net/Shids_/article/details/122451251

版权

组件封装专栏收录该内容

15 篇文章 8 订阅

订阅专栏

前言

在前端开发中，时间处理是不可或缺的一环。在 vue 中，封装一个好用的时间处理函数不仅可以提高开发效率，还能让代码更加简洁易懂。今天，我们就来一起探讨如何实现 vue 时间封装。

第一种：`"1999-02-07T21:35:56.157Z"`格式

<template>
  <div>
    <p>{{ someDate | formatDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someDate: "1999-02-07T21:35:56.157Z", // 这里是一个示例日期
    };
  },
  filters: {
    formatDate(originVal) {
      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 hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      const ss = (dt.getSeconds() + "").padStart(2, "0");
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    },
  },
};
</script>

效果展示

在这里插入图片描述

第二种：`"1641964865"`格式

<template>
  <div>
    <p>{{ someTimestamp | ProductDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someTimestamp: 1641964865, // 这里是一个示例时间戳
    };
  },
  filters: {
    ProductDate(value) {
      const time = new Date(value * 1000);
      const Y = time.getFullYear();
      const M = (time.getMonth() + 1).toString().padStart(2, '0');
      const D = time.getDate().toString().padStart(2, '0');
      const h = time.getHours().toString().padStart(2, '0');
      const m = time.getMinutes().toString().padStart(2, '0');
      const s = time.getSeconds().toString().padStart(2, '0');
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
  },
};
</script>

效果展示

在这里插入图片描述

第三种：`"Wed Mar 29 10:06:14 CST 2023"`格式

由于 CST 转成 GMT 时间存在 new Date() 导致原时间会加 14 个小时，所以在设置时间的时候，转换减去了 14 个小时。

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateToFormat: "Wed Mar 29 10:06:14 CST 2023", // 这里是一个示例日期
    };
  },
  computed: {
    formattedDate() {
      return this.dateFormat(this.dateToFormat, "yyyy-MM-dd HH:mm:ss");
    },
  },
  methods: {
    dateFormat(date, format) {
      date = new Date(date);
      date.setHours(date.getHours() - 14);
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "H+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "q+": Math.floor((date.getMonth() + 3) / 3),
        S: date.getMilliseconds(),
      };
      if (/(y+)/.test(format))
        format = format.replace(
          RegExp.$1,
          (date.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;
    },
  },
};
</script>

效果展示

在这里插入图片描述

封装公共方法

一般情况下，项目中会有很多有关于时间的展示，为了更加方便的在项目中使用，也为了减少不必要的重复性代码，我们可以将其进行全局的封装，通过全局引入和注册，在需要使用的文件中调用方法即可。

封装文件

// "1999-02-07T21:35:56.157Z"格式时间转换
function formatDate(originVal) {
    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 hh = (dt.getHours() + '').padStart(2, '0');
    const mm = (dt.getMinutes() + '').padStart(2, '0');
    const ss = (dt.getSeconds() + '').padStart(2, '0');
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
// "1641964865"格式时间转换
function formatProductDate(value) {
    const time = new Date(value * 1000);
    const Y = time.getFullYear();
    const M = (time.getMonth() + 1).toString().padStart(2, '0');
    const D = time.getDate().toString().padStart(2, '0');
    const h = time.getHours().toString().padStart(2, '0');
    const m = time.getMinutes().toString().padStart(2, '0');
    const s = time.getSeconds().toString().padStart(2, '0');
    return `${Y}-${M}-${D} ${h}:${m}:${s}`;
}
// "Wed Mar 29 10:06:14 CST 2023"格式时间转换
function formatCSTDate(date, format) {
    date = new Date(date);
    date.setHours(date.getHours() - 14);
    var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "H+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
        "q+": Math.floor((date.getMonth() + 3) / 3),
        S: date.getMilliseconds(),
    };
    if (/(y+)/.test(format))
        format = format.replace(
            RegExp.$1,
            (date.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;
}
//导出
export default {
    install(Vue) {
        Vue.filter('formatDate', formatDate);
        Vue.filter('formatProductDate', formatProductDate);
        Vue.prototype.$formatCSTDate = formatCSTDate;
    },
};

main.js 文件

//引入并注册
import dateUtils from '@/utils/dateUtils';
Vue.use(dateUtils);

任意使用文件

<template>
  <div>
    <p>{{ someDate | formatDate }}</p>
    <p>{{ productDate | formatProductDate }}</p>
    <p>{{ cstDate | formatCSTDate('yyyy-MM-dd HH:mm:ss')}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someDate: "1999-02-07T21:35:56.157Z",
      productDate: 1641964865,
      cstDate: "Wed Mar 29 10:06:14 CST 2023",
    };
  },
};
</script>

效果展示

在这里插入图片描述

除了上面说的几种时间格式之外，其实还有一些也是会经常遇到的，例如下面这些。

进阶

需求1：将时间数据（以秒为单位）转换成易于阅读的时间字符串，并在页面上显示出来，以秒、分钟和小时为单位进行显示。

规则

小于 60s 展示 xx 秒；
大于或等于 60s 展示 xx 分钟 xx 秒；
大于或等于 3600 展示 xx 小时 xx 分钟 xx 秒；
大于或等于 86400 展示 xx 天 xx 小时 xx 分钟 xx 秒。
实现思路

整体思路是首先检查输入的秒数是否大于等于 1 小时，如果是，将秒数分解为小时、分钟和剩余秒数，并将它们格式化为两位数的字符串，然后拼接成一个格式化的时间字符串。如果不满足 1 小时的条件，再次检查是否大于等于 1 分钟，按照类似的逻辑格式化时间。最后，如果不满足前两个条件，直接将秒数格式化为字符串。

<template>
  <div>
    <p>{{ convertSecondsToTime(second) }}</p>
    <p>{{ convertSecondsToTime(minute) }}</p>
    <p>{{ convertSecondsToTime(hour) }}</p>
    <p>{{ convertSecondsToTime(day) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      second: "20",
      minute: "70",
      hour: "6500",
      day: "2678400",
    };
  },
  methods: {
    convertSecondsToTime(seconds) {
      if (seconds >= 86400) {
        var days = Math.floor(seconds / 86400);
        var hours = Math.floor((seconds % 86400) / 3600);
        var minutes = Math.floor((seconds % 3600) / 60);
        var remainingSeconds = seconds % 60;

        // 使用 padStart 方法确保每个部分都有两位数
        days = String(days).padStart(2, "0");
        hours = String(hours).padStart(2, "0");
        minutes = String(minutes).padStart(2, "0");
        remainingSeconds = String(remainingSeconds).padStart(2, "0");

        return `${days}天${hours}小时${minutes}分钟${remainingSeconds}秒`;
      } else if (seconds >= 3600) {
        var hours = Math.floor(seconds / 3600);
        var minutes = Math.floor((seconds % 3600) / 60);
        var remainingSeconds = seconds % 60;

        hours = String(hours).padStart(2, "0");
        minutes = String(minutes).padStart(2, "0");
        remainingSeconds = String(remainingSeconds).padStart(2, "0");

        return `${hours}小时${minutes}分钟${remainingSeconds}秒`;
      } else if (seconds >= 60) {
        var minutes = Math.floor(seconds / 60);
        var remainingSeconds = seconds % 60;

        minutes = String(minutes).padStart(2, "0");
        remainingSeconds = String(remainingSeconds).padStart(2, "0");

        return `${minutes}分钟${remainingSeconds}秒`;
      } else {
        return `${seconds}秒`;
      }
    },
  },
};
</script>

效果展示

在这里插入图片描述

需求2：根据时间输出几分钟前，几小时前，几天前，几个月前，几年前。

<template>
  <div>
    <p>{{convertSecondsToTime('2023-08-23 16:00:00')}}</p>
    <p>{{convertSecondsToTime(1632355200000)}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    convertSecondsToTime(time) {
      const minute = 60 * 1000; // 1分钟对应的毫秒数
      const hour = 60 * minute; // 1小时对应的毫秒数
      const day = 24 * hour; // 1天对应的毫秒数
      const month = 30 * day; // 1个月对应的毫秒数（近似值）
      const year = 365 * day; // 1年对应的毫秒数（近似值）
      // 获取当前时间的毫秒数
      const currentTime = new Date().getTime();
      // 将传入的时间转换成毫秒数
      const timestamp = new Date(time).getTime();
      // 计算当前时间与传入时间的毫秒数差距
      const timeDiff = currentTime - timestamp;
      // 根据时间差距的大小，选择不同的时间格式进行返回
      if (timeDiff < minute) {
        return Math.round(timeDiff / 1000) + "秒前";
      } else if (timeDiff < hour) {
        return Math.round(timeDiff / minute) + "分钟前";
      } else if (timeDiff < day) {
        return Math.round(timeDiff / hour) + "小时前";
      } else if (timeDiff < month) {
        return Math.round(timeDiff / day) + "天前";
      } else if (timeDiff < year) {
        return Math.round(timeDiff / month) + "个月前";
      } else {
        return Math.round(timeDiff / year) + "年前";
      }
    },
  },
};
</script>

效果展示

在这里插入图片描述

下面我们将其揉成一个方法，通过传参的形式来判断要转换的时间格式。

封装文件

function convertSecondsToTime(time, isSeconds) {
    if (isSeconds == 'hmsTime') {
        // 转换为秒钟格式
        if (time >= 86400) {
            var days = Math.floor(time / 86400);
            var hours = Math.floor((time % 86400) / 3600);
            var minutes = Math.floor((time % 3600) / 60);
            var remainingSeconds = time % 60;

            // 使用 padStart 方法确保每个部分都有两位数
            days = String(days).padStart(2, '0');
            hours = String(hours).padStart(2, '0');
            minutes = String(minutes).padStart(2, '0');
            remainingSeconds = String(remainingSeconds).padStart(2, '0');

            return `${days}天${hours}小时${minutes}分钟${remainingSeconds}秒`;
        } else if (time >= 3600) {
            var hours = Math.floor(time / 3600);
            var minutes = Math.floor((time % 3600) / 60);
            var remainingSeconds = time % 60;

            hours = String(hours).padStart(2, '0');
            minutes = String(minutes).padStart(2, '0');
            remainingSeconds = String(remainingSeconds).padStart(2, '0');

            return `${hours}小时${minutes}分钟${remainingSeconds}秒`;
        } else if (time >= 60) {
            var minutes = Math.floor(time / 60);
            var remainingSeconds = time % 60;

            minutes = String(minutes).padStart(2, '0');
            remainingSeconds = String(remainingSeconds).padStart(2, '0');

            return `${minutes}分钟${remainingSeconds}秒`;
        } else {
            return `${time}秒`;
        }
    } else if (isSeconds == 'relativeTime') {
        // 转换为时间差格式
        const minute = 60 * 1000;
        const hour = 60 * minute;
        const day = 24 * hour;
        const month = 30 * day;
        const year = 365 * day;
        const currentTime = new Date().getTime();
        const timestamp = new Date(time).getTime();
        const timeDiff = currentTime - timestamp;
        if (timeDiff < minute) {
            return Math.round(timeDiff / 1000) + '秒前';
        } else if (timeDiff < hour) {
            return Math.round(timeDiff / minute) + '分钟前';
        } else if (timeDiff < day) {
            return Math.round(timeDiff / hour) + '小时前';
        } else if (timeDiff < month) {
            return Math.round(timeDiff / day) + '天前';
        } else if (timeDiff < year) {
            return Math.round(timeDiff / month) + '个月前';
        } else {
            return Math.round(timeDiff / year) + '年前';
        }
    }
}

export {
    convertSecondsToTime
};

main.js 文件

import { convertSecondsToTime } from '@/utils/globalMethods'; 
Vue.prototype.$convertSecondsToTime = convertSecondsToTime;

使用文件

console.log(this.$convertSecondsToTime(100, "hmsTime")); // 输出："01分钟40秒"
console.log(this.$convertSecondsToTime("2001-07-19", "relativeTime")); // 输出："22年前"