JS时间戳转常见时间格式的三种形式
更新时间:2023年4月15日14:42:07 作者:25:17
我们在开发过程中经常需要将时间戳转换为日期格式。 下面这篇文章主要给大家介绍一下JS时间戳转换为常见时间格式的三种主要形式。 您可以参考以下内容
目录
前言
将时间戳转换为js上常用的时间格式,主要有三种形式
1、利用JS中已有的函数,如getFullYear()、getMonth()等,直接将时间戳转换为对应的年份和月份;
2、创建时间过滤器,在其他页面直接调用该过滤器,并转换时间戳;
3.使用day.js将时间戳转换为常见的时间写入方式
4.本文以vue2和vue3两个后台管理系统中的订单时间为例,将原始时间戳转换为年月日的方法。 其中vue2使用js和elementui,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+elementui,订单时间时间戳转换为年月日的方式
(1)在main.js中javascript 时间戳 转换,创建一个filter并挂载到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-column label="下单时间" prop="create_time"> {{scope.row.create_time | dateFormat}}
3.day.js
点击链接直接进入:
(1)三种安装方式中选择第三种
npm install dayjs cnpm install dayjs -S yarn add dayjs
(2) 页面中的具体使用
示例:后台管理系统,vue3+TS+element-plus,订单时间时间戳转换为年月日的方式
使用前:
使用后:
①html部分
② 获取数据
③TS部分
转换接收到的数据中的创建时间javascript 时间戳 转换,其中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();
总结
关于JS时间戳转换为常用时间格式的三种形式的这篇文章就到此结束了。 更多关于JS时间戳转换方法,请搜索scripthome之前的文章或者继续浏览下面的相关文章。 以后一定要多多支持脚本之家!