返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue使用moment如何将时间戳转为标准日期时间格式
  • 508
分享到

vue使用moment如何将时间戳转为标准日期时间格式

vue使用momentmoment时间戳vue标准日期时间格式 2023-05-20 05:05:20 508人浏览 八月长安
摘要

目录使用moment将时间戳转为标准日期时间格式将时间戳转换为日期格式:moment、new Date()1.new Date()方式2. moment函数方式3.配合过滤器flit

使用moment将时间戳转为标准日期时间格式

Vue网页中显示数据库中datetime类型数据时,没有显示为年-月-日 时:分:秒的标准格式,而是显示为时间戳,与我们的要求不一致。

我们需要使用moment进行转换

1.安装moment

npm install moment --save

2.在需要格式转换的vue页面中引入moment

import moment from 'moment'

3.在 export default中添加filter过滤器和时间转换函数

filters:{
  dateFORM:function (el) {
    return moment(el).format('YYYY-MM-DD HH:mm:ss');
  }
}

4.在template模板中使用

<span>{{scope.row.time|dateForm}}</span>

即在变量名后加上格式转换函数名

这时,网页中显示为标准日期时间格式了

将时间戳转换为日期格式:moment、new Date()

1.new Date()方式

获取当前时间的时间戳:

Date.now() //=>1672974684470

将时间戳转换为日期时间:

new Date(1672974684470)
//=>Fri Jan 06 2023 11:11:24 GMT+0800 (中国标准时间)

注意:时间戳标准是以毫秒为单位的,所以一共有13位,如果位数只有10位,说明它是以秒为单位的。此时要把它转成毫秒单位再进行日期转换,不然时间日期就不对。

获取年份:

new Date(1672974684470).getFullYear()//=>2023

获取月份:

new Date(1672974684470).getMonth()//=>0

月份是从0开始计的,1月份就是0;

获取日期:

new Date(1672974684470).getDate()//=>6

获取时间戳是星期几:

new Date(1672974684470).getDay()//=>5

获取小时:getHours()、获取分钟:getMinutes()

2. moment函数方式

moment:日期格式化函数

在vue项目中使用这个函数的步骤:

下载moment模块:

npm i --save moment --legacy-peer-deps

引入模块:

import moment from 'moment'

最基本的用法:

//moment().format():格式化当前的时间
console.log(moment().format())//=>2023-01-06T13:21:11+08:00

传参数:

  • moment()和format()里可以通过传参数来设置如何格式化时间:
  • 详情见网址:Http://momentjs.cn/

常见的“yyyy-mm-dd”格式:

console.log(moment().format('YYYY-MM-DD'))//=>2023-01-06

将时间戳转换为日期格式:

console.log(moment(1672974684470).format('YYYY-MM-DD'))//=>2023-01-06

3.配合过滤器fliter使用

<div class="grey-text">{{filmInfo.premiereAt | dateFilter}}上映</div>
import Vue from 'vue'
import moment from 'moment'
Vue.filter('dateFilter', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})//乘以1000的原因是,后端给的时间戳是以秒为单位的,在这里换算成毫秒

变换之前的时间戳效果:(后端给的数据是时间戳)

1671148800 上映

变换后的日期效果:

2022-12-16 上映

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue使用moment如何将时间戳转为标准日期时间格式

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

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

猜你喜欢
  • vue使用moment如何将时间戳转为标准日期时间格式
    目录使用moment将时间戳转为标准日期时间格式将时间戳转换为日期格式:moment、new Date()1.new Date()方式2. moment函数方式3.配合过滤器flit...
    99+
    2023-05-20
    vue使用moment moment时间戳 vue标准日期时间格式
  • vue如何使用moment处理时间戳转换成日期或时间格式
    目录一、使用环境二、安装moment三、在vue所需页面进行引入五、最终效果 六、moment中文官网总结一、使用环境 Moment 被设计为在浏览器和 Node.js 中...
    99+
    2024-04-02
  • 如何用PHP将Unix时间戳转为日期时间格式
    Unix时间戳是指从1970年1月1日0时0分0秒起至当前时间的总秒数,它是Linux、Unix系统所采用的一种时间表示标准,也被广泛应用于Web开发中。在PHP中,我们可以把Unix时间戳转换为日期时间格式,以便更好地呈现时间信息。本文将...
    99+
    2023-05-14
    php php时间戳
  • vue怎么使用moment处理时间戳转换成日期或时间格式
    本篇内容主要讲解“vue怎么使用moment处理时间戳转换成日期或时间格式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么使用moment处理时间戳转换成日期或时间格式”吧!一、使用环境...
    99+
    2023-06-29
  • 如何用php将日期格式转为Unix时间戳
    这篇文章主要介绍“如何用php将日期格式转为Unix时间戳”,在日常操作中,相信很多人在如何用php将日期格式转为Unix时间戳问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何用php将日期格式转为Unix...
    99+
    2023-07-05
  • 怎么用PHP将Unix时间戳转为日期时间格式
    今天小编给大家分享一下怎么用PHP将Unix时间戳转为日期时间格式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用date...
    99+
    2023-07-05
  • php将时间戳转换成日期时间格式
    在 php 中,可以通过使用 date() 函数将时间戳转换为日期时间格式,例如 "2023-03-08 12:34:56"。该函数接受时间戳和格式字符串作为参数。例如:$formatt...
    99+
    2024-04-09
    php 时间戳
  • 在PHP中如何将时间戳转化为日期和时间格式
    本篇内容介绍了“在PHP中如何将时间戳转化为日期和时间格式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!什么是时间戳时间戳是指自1970年1...
    99+
    2023-07-05
  • 如何使用PHP将时间戳转成日期格式
    PHP是一门功能强大的编程语言,它不仅能够完成网站和应用程序的开发,还支持各种数据操作和处理。在实际开发过程中,我们常常需要将时间戳转换成可读性更强的日期格式。下面就让我们来学习如何使用PHP将时间戳转成日期格式。什么是时间戳?时间戳指的是...
    99+
    2023-05-14
    php
  • 如何用sql将时间戳转换日期格式
    要将 sql 中的时间戳转换成日期格式,可以使用 to_char() 函数:to_char(timestamp_column, 'yyyy-mm-dd') 将时间戳转...
    99+
    2024-06-06
  • php如何将13位时间戳转换为标准时间戳
    PHP是一种非常流行的编程语言,许多人使用它来开发Web应用程序和网站。在处理时间戳时,您可能需要将13位时间戳转换为标准时间戳。在本文中,我将向您展示如何在PHP中将13位时间戳转换为标准时间戳。什么是时间戳?时间戳是一个用于表示日期和时...
    99+
    2023-05-14
    php php时间戳
  • 如何使用PHP将时间戳转为美式时间格式
    在使用PHP进行时间相关操作时,很多时候需要将时间戳转换为美式(MM/DD/YYYY HH:MM:SS)格式的时间。在这篇文章中,我们将介绍如何使用PHP将时间戳转换为美式时间格式。一、时间戳是什么?首先,我们需要了解时间戳是什么。时间戳是...
    99+
    2023-05-14
  • php如何将日期转为时间戳
    小编给大家分享一下php如何将日期转为时间戳,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!php有什么用php是一个嵌套的缩写名称,是英文超级文本预处理语言,它的...
    99+
    2023-06-15
  • php如何将时间戳转为日期
    本篇内容主要讲解“php如何将时间戳转为日期”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php如何将时间戳转为日期”吧!PHP提供了两个函数可以用来处理时间戳和日期。这些函数分别是 date(...
    99+
    2023-07-05
  • PHP教程:如何将时间戳转换为日期格式
    时间戳是一种常用的时间表示方法,通常以整数形式表示从1970年1月1日 00:00:00开始经过的秒数。在编程中,经常需要将时间戳转换为日期格式以便于显示和处理时间信息。PHP作为一种...
    99+
    2024-03-08
    php 时间戳 日期格式
  • mysql时间戳如何转换为日期格式
    这篇文章主要为大家展示了“mysql时间戳如何转换为日期格式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“mysql时间戳如何转换为日期格式”这篇文章吧。 ...
    99+
    2024-04-02
  • php如何用strtotime函数将日期格式转为时间戳
    本篇内容介绍了“php如何用strtotime函数将日期格式转为时间戳”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!日期格式转时间戳是在PH...
    99+
    2023-07-05
  • MongoDB中怎么将时间戳转为日期格式
    这篇文章给大家介绍MongoDB中怎么将时间戳转为日期格式,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。MongoDB模糊查询方法示例:模糊查询:tname包含某个关键字测试'...
    99+
    2024-04-02
  • javascript将时间戳转为日期格式的方法
    本篇内容主要讲解“javascript将时间戳转为日期格式的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript将时间戳转为日期格式的方法”吧...
    99+
    2024-04-02
  • php时间戳转换为日期格式
    如何在 php 中将时间戳转换为日期格式?使用 date() 函数,传递格式字符串和时间戳。php 提供预定义的格式字符串,如 y(年份)、m(月份)、d(日期)。实战案例:将时间戳显示...
    99+
    2024-04-09
    时间戳 日期格式
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作