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

我们在开发中经常需要把时间戳转化成日期格式,下面这篇文章主要给大家介绍了关于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 < 10 date.getdate() date.getdate()); hour date.gethours() date.gethours()); minute date.getminutes() date.getminutes()); sechond=(date.getSeconds() date.getseconds() date.getseconds()); gmt=Year '-' moth ' '+ +':'+ ':' sechond; console.log(gmt)>

附加

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）页面中具体使用

3、day.js

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

（1）三种安装方式任选其一

npm install dayjs cnpm install dayjs -S yarn add dayjs

（2）页面中具体使用

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

使用前：

使用后：

① html部分

②获取到的数据

③TS部分

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

// 引入 import { dayjs } from "element-plus"; interface IOrderList { order_number: string; // 订单编号 create_time: number; // 下单时间 } const orderList = reactive([]); // 获取订单数据 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();