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

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中的完整代码片：

<flexbox-item :span="3/7"><div><flexbox orient="vertical" :gutter="0"><flexbox-item><div class="tdname">{{item.classifyOneName}}/{{item.classifyTwoName}}/{{item.classifyThreeName}}</div></flexbox-item><flexbox-item><div class="tdname">合同负责人：{{item.contractOwner}}</div></flexbox-item></flexbox></div>
</flexbox-item>

同理：中间带“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：使用

<span>{{scope.row.startTime | formatDate}}</span>

3.另一种过滤器
后端时间戳变标准时间样式

步骤1：定义

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

步骤2：使用

<span>{{scope.row.endTime | format}}</span>

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

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

5.传入时间戳显示时间

<el-form-item label="推荐日期:" prop="recommendDate"><el-date-pickerclass="zindex-marge"v-model="addForm.recommendDate"type="date"format="yyyy-MM-dd"value-format="yyyy-MM-dd"placeholder="选择日期"></el-date-picker>
</el-form-item>

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() < 10 ? `0${Time.getMinutes()}` : Time.getMinutes()) +":" + (Time.getSeconds() < 10 ? `0${Time.getSeconds()}` : Time.getSeconds())
this.nowTime = t;

【vue】时间戳、中国标准时间等格式转换时间样式（yyyy-MM-dd）相关推荐

年月日格式判断-正则表达式 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}| ...
时间格式区别之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 时间戳中国标准时间）
1. 类型总结指定格式 YYYY-MM-DD HH:MM:SS 时间戳中国标准时间 Sat Jan 30 2022 08:26:26 GMT+0800 (中国标准时间) new Date()获得系 ...
JS获取当天零点零时零秒（中国标准时间）格式
记录关于如果如何获取当天零点时间(中国标准时间)格式前言在项目中使用Element-ui中 DateTimePicker 日期时间选择器时,开始时间与结束时间需要默认当天时间,结束时间需要判断当天 ...
得到 yyyy/mm/dd 格式时间
在做项目的时候:很多文件都是按数据添加时间的年/月/日的目录保存做的时候发现不能直接 DateTime(yyyy-mm-dd).ToString("yyyy/MM/dd")得到 ...
将字符串格式yyyy/MM/dd的字符串转为日期，格式“yyyy-MM-dd“
将字符串格式yyyy/MM/dd的字符串转为日期,格式"yyyy-MM-dd" public static String strToDateFormat(String date) ...
Python写，将输入的yyyy/mm/dd格式的日期显示为yyyy年mm月dd日。
7.(程序题)编程将输入的yyyy/mm/dd格式的日期显示为yyyy年mm月dd日. str = input("请输入日期:") length=len(str) if str[6 ...
小程序ios时间格式 yyyy/MM/dd
小程序选用f2-canvas画图表, 横坐标是时间. 实际上线后,发现android上是好的,但是iphone上显示不对,后来发现是时间格式问题,ios不识别yyyy-MM-dd, 要转换成yyyy/ ...
vue3时间格式转换为yyyy/mm/dd,yyyy-MM-dd,yyyy-MM-dd hh:mm:ss,hh:mm,yyyy-MM-ddThh:mm:ss+08:00
时间格式转换为yyyy/mm/dd export const dateFormat1 = (time = new Date().getTime()) => { //YYYY/MM/DDconst ...

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

【vue】时间戳、中国标准时间等格式转换时间样式（yyyy-MM-dd）相关推荐

最新文章

热门文章