momentjs转换格式_Moment.js+Vue过滤器的使用,各种时间格式转换为YYYY-MM-DD HH:mm:ss格式...
前言
这篇文章将Moment.js与vue过滤器连用。如果不会过滤器的朋友,可以先看这篇文章vue过滤器
一、Moment.js是什么?
Moment.js是JavaScript 日期处理类库。使用场景:vue项目中经常需要将时间戳转换为各种时间格式再显示。
二、使用步骤
1.安装
这里只展示Node.js的安装方法。其余安装方式详见Moment.js文档
Node.js安装代码如下(示例):
npm install moment1
2.在过滤器中添加function
我这里省略了过滤器的创建过程,不会过滤器的朋友,可以先看这篇文章vue过滤器
filter.js代码如下(示例):
import moment from 'moment' //引用
//添加一个function
let dateFormatter = function(time, format){ if (time == null) return '----' var date = moment(time).format(format) return date
}
//导出这个function
export {dateFormatter}1
2
3
4
5
6
7
8
9
10
11
12
3.在template中使用
假设我页面中要显示这么一个表格,里面包含一个日期,现在使用过滤器来显示指定格式的时间。
数据格式如下:
tableData: [ { date: "1609840835000", //时间戳为String name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }, { date: "2021W02", name: "王二狗", address: "上海市普陀区金沙江路 1517 弄", }, { date: "20130208T080910,123", name: "王三猪", address: "上海市普陀区金沙江路 1519 弄", }, { date: "2017-12-14T16:34", name: "王四羊", address: "上海市普陀区金沙江路 1516 弄", }, { date: "2013-02-04T10:35:24-08:00", name: "王五猫", address: "上海市普陀区金沙江路 1516 弄", }, { date: "2013-02-04T18:35:24+00:00", name: "王六牛", address: "上海市普陀区金沙江路 1516 弄", }, { date: "Fri Mar 30 2012 08:00:00 GMT+0800", name: "王七蛇", address: "上海市普陀区金沙江路 1516 弄", }, { date: "2021-01-05T11:18:47.262Z", name: "王八龟", address: "上海市普陀区金沙江路 1516 弄", }, ]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
template中使用:
{{ scope.$index + 1 }}{{ scope.row.date | dateFormatter("YYYY-MM-DD HH:mm:ss") }}{{ scope.row.name }}{{ scope.row.address }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
页面显示如下:
发现一个问题,时间戳显示为YYYY-MM-DD HH:mm:ss格式时为无效日期。
这是为什么呢?
4.时间戳显示为Invalid date
使用时间戳转换时间时,要使用
moment(Number) //参数传Number类型
而不是moment(String)
如果使用moment(String)方式,会变成Invalid date
那么将date为时间戳的date改为Number
{ date: 1609840835000, //时间戳为Nmber name: "王小虎", address: "上海市普陀区金沙江路 1518 弄",
}1
2
3
4
5
最终结果:
总结
以上就是今天要讲的内容,本文仅仅简单介绍了Moment.js+Vue过滤器的使用。
文章来源: blog.csdn.net,作者:火锅店在逃毛肚,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/qq_36818931/article/details/112233886
momentjs转换格式_Moment.js+Vue过滤器的使用,各种时间格式转换为YYYY-MM-DD HH:mm:ss格式...相关推荐
- spring boot + vue 前后端分离时间戳转换为 yyyy:MM:dd HH:mm:ss格式
后端 1.model(entity)注释直接转换 当返回类型为resultMap,在entity类里面相应属性上加上以下注释 @JsonFormat(pattern="yyyy-MM-dd ...
- 时间格式区别之YYYY/MM/dd HH:mm 与 yyyy/MM/dd HH:mm
1. 相应的业务场景 1.1 场景简介 正值2019年末,2020年初之际,系统日期时间为2019/12/31而系统报表却出现了2020/12/31的日期. 1.2 代码案例如下 2.Java中YYY ...
- js时间格式化 YYYY/MM/DD HH:MM:SSS
/*** 将"2018-05-19T08:04:52.000+0000"这种格式的时间转化为正常格式* @param time*/ function timeFormat(time ...
- 小程序日期格式(yyyy-MM-dd HH:mm:ss)转(yyyy/MM/dd HH:mm:ss)
let newDate = (date).replace(/-/g, '/'); var date = new Date(newDate).getTime(); 转载于:https://www.cnb ...
- Vue+Vant 基于DatetimePicker进行二次开发,实现yyyyMMdd hh:mm:ss时间选择
Vue+Vant 基于DatetimePicker进行二次开发,实现yyyyMMdd hh:mm:ss时间选择 1.效果图 2.前提 3.项目结构 4.index.vue 5.timeSelectio ...
- java date eee_java将 Date原始格式EEE MMM dd HH:mm:ss Z yyyy转成指定格式
java将 Date原始格式"EEE MMM dd HH:mm:ss Z yyyy"转成指定格式 //将 Date原始格式"EEE MMM dd HH:mm:ss Z y ...
- 年月日格式判断-正则表达式 YYYY/MM/DD、YYYY/MM/DD| YY/MM/DD、 ^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}…
一.简单的日期判断(YYYY/MM/DD): ^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$ 二.演化的日期判断(YYYY/MM/DD| YY/MM/DD): ^(^(\d{4}| ...
- element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com ...
- html的时间格式转换为本地时间,将UTC日期字符串转为本地时间字符串,如@yyyy-MM-dd'T'HH:mm:ssZ转换为本地时间...
由于苹果商店上线应用24小时内会不稳定,更新提醒可能会陷入死循环,更新提醒需要24小时后弹出,需要把苹果返回的上线时间转换为本地时间故写了下边的方法: //将UTC日期字符串转为本地时间字符串 //输 ...
最新文章
- 公路修建问题(二分+最小生成树)
- Asp.Net MVC4入门指南(3):添加一个视图
- oracle创建序列seq起始值为1_oracle 重置序列从指定数字开始的方法详解
- mysql mysqlhotcopy_MySQL备份工具之mysqlhotcopy
- c#获取txt,word,excel文档内容方法
- 6.LibSVM核函数
- 中间件的解析漏洞详解及演示
- mysql sqlsugar_sqlSugar的使用---入门
- java jmx 监控_利用VisualVm和JMX远程监控Java进程
- 二叉树的创建_【数据结构用python描述】python创建二叉树
- Linux无线网络实用工具Top 10
- mysql中find_in_set()函数的使用(转载)
- 装linux系统为什么会黑屏_Ubuntu安装时出现黑屏问题的解决
- 软键盘怎么打开,软键盘怎么调出来
- 【Java获取国家法定节假日三种工具类其二】
- 【阅读笔记】Deep Mutual Learning
- Ubuntu Desktop 安装谷歌拼音输入法
- c语言写易语言支持库6,易语言编写支持库
- (二)使用npm搭建React项目
- 软件开发怎么对抗抄袭_对抗软件开发中的复杂性