广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS时间戳转换为常用时间格式的三种方式
  • 812
分享到

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

摘要

目录前言1、js 时间戳转日期(可直接复制)2、在main.js中创建过滤器(1)main.js中,创建过滤器将其挂载到Vue上(2)页面中具体使用3、day.js(1)三种安装方式

前言

在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时间戳转换方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS时间戳转换为常用时间格式的三种方式

本文链接: https://www.lsjlt.com/news/209660.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS时间戳转换为常用时间格式的三种方式
    目录前言1、js 时间戳转日期(可直接复制)2、在main.js中创建过滤器(1)main.js中,创建过滤器将其挂载到vue上(2)页面中具体使用3、day.js(1)三种安装方式...
    99+
    2023-05-16
    js时间戳转换为时间 js时间戳转换 js怎么将时间戳换为时间
  • JS时间戳转换为常用时间格式的方法有哪些
    这篇文章主要介绍“JS时间戳转换为常用时间格式的方法有哪些”,在日常操作中,相信很多人在JS时间戳转换为常用时间格式的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS时间戳转换为常用时间格式的方法...
    99+
    2023-07-06
  • C#时间格式如何转换为时间戳
    这篇文章给大家分享的是有关C#时间格式如何转换为时间戳的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。时间戳转换:/// <summary>/// C#时间格式转换为时间戳(互转)/...
    99+
    2023-06-06
  • PHP如何将时间戳转换为常见的时间格式
    本文小编为大家详细介绍“PHP如何将时间戳转换为常见的时间格式”,内容详细,步骤清晰,细节处理妥当,希望这篇“PHP如何将时间戳转换为常见的时间格式”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。将时间戳转换为日期...
    99+
    2023-07-05
  • Java——时间戳和时间格式转换
    时间戳(TimeStamp):通常是一个字符序列,唯一地标志某一刻的时间。Java 中时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数。 一、获取时间戳的方式 1.System.currentTimeM...
    99+
    2023-08-17
    java
  • php怎么将时间戳转换为时间格式
    时间戳是一种表示时间的方法,它是从1970年1月1日00:00:00开始计算的秒数。在很多应用程序中,我们需要将时间戳转换为人类可读的时间格式,以便更清晰地理解时间。 在PHP中,有几种简单的方法可以将时间戳转换为时间。在本文中,我们将探讨...
    99+
    2023-05-14
  • 怎么将PHP时间格式转换为时间戳
    这篇文章主要介绍“怎么将PHP时间格式转换为时间戳”,在日常操作中,相信很多人在怎么将PHP时间格式转换为时间戳问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么将PHP时间格式转换为时间戳”的疑惑有所帮助!...
    99+
    2023-07-05
  • php如何将时间戳转换为时间格式
    这篇“php如何将时间戳转换为时间格式”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php如何将时间戳转换为时间格式”文章吧...
    99+
    2023-07-05
  • MySQL 中时间戳及时间戳的格式转换
    MySQL 中时间戳及时间戳的格式转换 一、什么是时间戳二、时间戳转换时间三、时间转换为时间戳 一、什么是时间戳 时间戳是指格林威治时间自1970年1月1日(00:00:00 GMT)至当前时间的总秒数。通俗的讲,时间戳...
    99+
    2023-08-16
    mysql 数据库 sql
  • PHP如何快速转换时间戳为时间格式
    本篇内容介绍了“PHP如何快速转换时间戳为时间格式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!方法一:使用 date 函数date 函数是...
    99+
    2023-07-05
  • php时间戳如何转换时间格式
    这篇文章主要介绍“php时间戳如何转换时间格式”,在日常操作中,相信很多人在php时间戳如何转换时间格式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php时间戳如何转换时间格式”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-05
  • Python中三种时间格式转换的方法
    目录一 时间元组二 字符串与时间戳三 时间的加减用法一 时间元组 1. 时间元组和时间戳的互化 import time,datetime # 获取当前时间的时间元组 t = time...
    99+
    2023-05-18
    Python 时间格式转换 Python 时间转换
  • php如何将时间格式转换时间戳
    小编给大家分享一下php如何将时间格式转换时间戳,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!php时间格式转换时间戳的方法:1、使用strtotime()函数,可以将英文文本字符串表示的日期转换为时间戳;2、使用mkti...
    99+
    2023-06-14
  • 怎么使用PHP时间戳转换源码来转换时间戳为日期格式
    这篇“怎么使用PHP时间戳转换源码来转换时间戳为日期格式”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用PHP时间戳转...
    99+
    2023-07-05
  • Php如何将时间戳转换为可读的时间格式
    本篇内容介绍了“Php如何将时间戳转换为可读的时间格式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!PHP是一门广泛应用于Web开发中的编程...
    99+
    2023-07-05
  • 常见的PHP时间格式转为时间戳的方法有哪些
    今天小编给大家分享一下常见的PHP时间格式转为时间戳的方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。strtoti...
    99+
    2023-07-05
  • 怎么用php将时间格式转为时间戳
    这篇文章主要讲解了“怎么用php将时间格式转为时间戳”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用php将时间格式转为时间戳”吧!时间戳是一种表示日期和时间的数字,通常是从某个固定日期...
    99+
    2023-07-05
  • Python3时间戳转换为指定格式的日
    在写Python的时候经常会遇到时间格式的问题,首先就是最近用到的时间戳(timestamp)和时间字符串之间的转换。所谓时间戳,就是从 1970年1月1日 00:00:00 到现在的秒数。原来我也写过关于python3里面如何进行时间转...
    99+
    2023-01-31
    转换为 格式 时间
  • 如何用php将时间格式转为时间戳?两种方法介绍
    PHP是一种广泛使用的服务器端编程语言,用于开发Web应用程序。在Web应用程序中,经常需要将时间以不同的格式进行展示或计算,而PHP中提供了强大的时间处理函数,使得时间处理变得非常容易。在本文中,我们将介绍如何将PHP时间格式转换为时间戳...
    99+
    2023-05-14
    php时间戳 php
  • Python3时间转换之时间戳转换为指定格式的日期方法详解
    在写Python的时候经常会遇到时间格式的问题,首先就是最近用到的时间戳(timestamp)和时间字符串之间的转换。所谓时间戳,就是从 1970年1月1日 00:00:00 到现在...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作