【vue】时间戳、中国标准时间等格式转换时间样式（yyyy

2023-04-03 10:15| 来源: 网络整理| 查看: 265

1、2020-03-06 17:26:40 截取变2020-03-06 2、3、时间戳变yyyy-MM-dd（两种方法） 4、时间戳转换成NaN 乱码转换成yyyy-MM-dd 5、中国标准时间格式转yyyy-MM-dd hh:mm:ss

1.后端传来的是完整的时间格式：" 2020-03-06 17:26:40 " 想要显示年月日：“ 2020-03-06 ”

{ { (item.beginDate || '').split(' ')[0]}}-{ { (item.endDate || '').split(' ')[0]}}

本页显示样式：在这里插入图片描述我这里做的是mobile端界面，所需要显示的时间数据在一个flexbox 下的flexbox-item中，这里是Vue中的完整代码片：

{ { item.classifyOneName}}/{ { item.classifyTwoName}}/{ { item.classifyThreeName}} 合同负责人：{ { item.contractOwner}}

同理：中间带“T”的写法就是{ {(scope.row.createTime || '').split('T')[0]}}

在这里插入图片描述

2.将毫秒数（时间戳：1583769600000）转换成标准时间格式（yyyy-MM-dd：2020-3-10）

以下过滤器写法源于：chp-22博主的博客

过滤器写法是一种一劳永逸的操作，经常用你就给咱好好保存了步骤1：建立一个Date.js文件

export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${ k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt; }; function padLeftZero (str) { return ('00' + str).substr(str.length); }

步骤2：在需要用的页面引用Date.js中的formatDate方法

import { formatDate} from '../../../assets/js/Date.js'

步骤3：写过滤器（还是这个步骤2的页面里）过滤器filters和methods平级啊别忘了

filters:{ formatDate(time){ var data = new Date(time); return formatDate(data,'yyyy MM dd hh:mm:ss'); } }

步骤4：使用

{ { scope.row.startTime | formatDate}}

3.另一种过滤器后端时间戳变标准时间样式在这里插入图片描述步骤1：定义

filters:{ format(value){ var date = new Date(value); var tt = [date.getFullYear(), date.getMonth()+1, date.getDate()].join('-') ; return tt; } }

步骤2：使用

{ { scope.row.endTime | format}}

4.以上的方法用了变成显示 NaN 乱码需要提前转换一下字符串形式

filters:{ format(value){ var date = new Date(parseInt(value)); var tt = [date.getFullYear(), date.getMonth()+1, date.getDate()].join('-') ; return tt; } },

5.传入时间戳显示时间在这里插入图片描述

getArticleById(id).then(res => { if(res.state == 0) { this.addForm.articleTitle = res.data.articleTitle;//普通字段 this.addForm.recommendDate = new Date(res.data.recommendDate);//时间字段 } else { this.$message.error(res.message || '查询失败') } }).catch(err => { this.$message.error(err.message || '查询失败') })

4、

var Time = new Date(); var weeks = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); this.nowWeek = weeks[Time.getDay()]; let t = Time.toLocaleDateString() + ' ' + Time.getHours() + ":" + (Time.getMinutes() Time.getSeconds()}` : Time.getSeconds()) this.nowTime = t;

在这里插入图片描述

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章