JS时间戳转换为常用时间格式的三种方式

 更新时间:2023年04月15日 14:42:07   作者:25:17  
我们在开发中经常需要把时间戳转化成日期格式,下面这篇文章主要给大家介绍了关于JS时间戳转换为常用时间格式的三种主要方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

在js中将时间戳转换为常用的时间格式,有三种主要的方式

1、使用JS中已有的函数,例如getFullYear(),getMonth()等,将时间戳直接转换成对应的年月;

2、创建时间过滤器,在其他的页面中直接调用该过滤器,转换时间戳;

3、使用day.js,将时间戳转换成常用的时间写法

4、本文以vue2和vue3两个后台管理系统中的下单时间为例,将原本的时间戳转换为年月日的形式,其中vue2使用js和element ui,vue3使用TS和element-plus

1、js 时间戳转日期(可直接复制)

    // 时间戳 
    let timestamp = 1662537367
    // 此处时间戳以毫秒为单位
    let date = new Date(parseInt(timestamp) * 1000);
    let Year = date.getFullYear();
    let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
    let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
    let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
    let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
    let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
    let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
    
    console.log(GMT)  // 2022-09-07 15:56:07

附加

let nowTime = new Date().valueOf();//时间戳
console.log(nowTime) // 获取当前时间的时间戳

2、在main.js中创建过滤器

示例:后台管理系统,vue2 + JS + element ui,将下单时间的时间戳转换为年月日的形式

(1)main.js中,创建过滤器将其挂载到vue上

注意:我这边后台返回的数据需要进行单位换算,所以originVal * 1000,具体情况具体分析,不同单位的数据请自行调整

import Vue from 'vue'
// 创建过滤器,将秒数过滤为年月日,时分秒,传参值originVal为毫秒
Vue.filter('dateFormat', function(originVal){
  // 先把传参毫秒转化为new Date()
  const dt = new Date(originVal * 1000)
  const y = dt.getFullYear()
  // 月份是从0开始,需要+1
  // +''是把数字转化为字符串,padStart(2,'0')是把字符串设置为2位数,不足2位则在开头加'0'
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  return `${y}-${m}-${d}`
})

(2)页面中具体使用

<el-table :data="orderList" border stripe class="mt20">
	<el-table-column label="下单时间" prop="create_time">
		<template slot-scope="scope">
			{{scope.row.create_time | dateFormat}}
		</template>
	</el-table-column>
</el-table>

3、day.js

点击链接直达:https://dayjs.fenxianglu.cn/

(1)三种安装方式任选其一

npm install dayjs
cnpm install dayjs -S
yarn add dayjs

(2)页面中具体使用

示例:后台管理系统,vue3 + TS + element-plus,将下单时间的时间戳转换为年月日的形式

使用前:

使用后:

① html部分

<el-table>
	<el-table-column prop="create_time" label="下单时间" />
</el-table>

②获取到的数据

③TS部分

对拿到的数据中的创建时间进行转换,其中dayjs()中携带需要转换的时间戳参数,format()中携带所期待转换成的形式

// 引入
import { dayjs } from "element-plus";

interface IOrderList {
  order_number: string; // 订单编号
  create_time: number; // 下单时间
}
const orderList = reactive<IOrderList[]>([]);
// 获取订单数据
const getOrderList = async () => {
  orderList.length = 0;
  let orders = await ordersAPI(pageInfo.value);
  
// 对 orders.data.goods进行遍历,dayjs()中携带需要转换的时间戳参数,format()中携带所期待转换成的形式
  orders.data.goods.forEach((el: any) => {
    el.create_time = dayjs(el.create_time * 1000).format("YYYY-MM-DD");
  });
  orderList.push(...orders.data.goods);
};
getOrderList();

总结

到此这篇关于JS时间戳转换为常用时间格式的三种方式的文章就介绍到这了,更多相关JS时间戳转换方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS 实现百度搜索功能

    JS 实现百度搜索功能

    这篇文章给大家介绍了js实现百度搜索功能,代码分为html部分和css折叠样式部分,具体实现代码大家参考下本文
    2018-02-02
  • JS实现jQuery的append功能

    JS实现jQuery的append功能

    jQuery中可以直接使用$el.append()为元素添加字符串型dom, 但是最近转战Vue, 再使用jQuery明显不合适了, 所以通过查找资料, 封装一个可以实现同样效果的方法.
    2021-05-05
  • js传值后台中文出现乱码的解决方法

    js传值后台中文出现乱码的解决方法

    这篇文章主要介绍了js传值后台中文出现乱码的解决方法,涉及javascript针对中文的编码及java解码操作相关技巧,需要的朋友可以参考下
    2016-06-06
  • JavaScript实现快速排序的方法分析

    JavaScript实现快速排序的方法分析

    这篇文章主要介绍了JavaScript实现快速排序的方法,结合实例形式分析了快速排序的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2018-01-01
  • Express的路由详解

    Express的路由详解

    这篇文章主要介绍了Express的路由详解的相关资料,需要的朋友可以参考下
    2015-12-12
  • javascript中关于执行环境的杂谈

    javascript中关于执行环境的杂谈

    如你所知,javascript里执行环境是作为一个最核心的概念存在的。相信广大FE筒子们对于这个概念不会陌生,它定义了变量或函数有权访问其他数据范围以及其行为。
    2011-08-08
  • JS动态显示倒计时效果

    JS动态显示倒计时效果

    这篇文章主要介绍了JS实现倒计时效果动态显示倒计时功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • JavaScript数组的定义及数字操作技巧

    JavaScript数组的定义及数字操作技巧

    这篇文章主要介绍了JavaScript数组的定义及数字操作技巧的相关资料,需要的朋友可以参考下
    2016-06-06
  • 使用JS判断移动端手机横竖屏状态

    使用JS判断移动端手机横竖屏状态

    本文通过js和cas代码分别给大家介绍了移动端判断手机横竖屏状态的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • JavaScript预解析及相关技巧分析

    JavaScript预解析及相关技巧分析

    这篇文章主要介绍了JavaScript预解析及相关技巧,结合实例形式分析了JavaScript与解析的原理,步骤与相关技巧,需要的朋友可以参考下
    2016-04-04

最新评论