vue时间戳转换日期格式

一,vue获取时间戳转换为日期格式

后台返回的时间戳格式(例如:creatTime: 1626832597790),需要用时间格式显示

(1)需要2021-09-05格式显示

         <el-table-column align="center" label="发布日期"><template slot-scope="scope"><span v-if="scope.row.creatTime != null">{{ parseTime(scope.row.creatTime, "{y}-{m}-{d}") }}</span></template></el-table-column>

(2)需要2021-08-27 09:19:35格式显示

        <el-table-column align="center" label="提交反馈时间"><template slot-scope="scope"><span v-if="scope.row.creatTimes!= null">{{ parseTime(scope.row.creatTime ) }}</span></template></el-table-column>

二, 需要向后台传时间戳格式的写法 如下格式

(1)2020-09-28格式转时间戳

  return{form:{startTime:"",endTime:"",}}
   startTime:new Date(this.form.startTime).getTime()endTime: new Date(this.form.endTime).getTime()

(2)如果开始时间或者结束时间取当天时间

  return{form:{startTime: new Date(),endTime:"",}}
   startTime: new Date(this.form.startTime).getTime()endTime: new Date(this.form.endTime).getTime()

(3)如下格式 2021-09-28—2021-09-30格式

   <el-form-item><span class="demonstration">日期筛选:</span><el-date-pickerv-model="createTime"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-form-item>
  return{createTime:"",}
  startTime:this.createTime && this.createTime[0] ? new Date(this.createTime[0]).getTime() : "",endTime:this.createTime && this.createTime[1] ? new Date(this.createTime[1]).getTime(): "",

三,获取当前的年月日时分秒并展示

<div class="rightime"><div class="span1">{{ nowtime }}</div >
</div>
  return{nowtime:""}mounted(){setInterval(() => {this.getTime();}, 1000);},methods:{getTime() {this.nowtime = parseTime(new Date(), '{y}年{m}月{d}日 {h}:{i}:{s} 周{a}');},
}

四,需要传(2021-12-16)

<el-date-picker type="date" placeholder="选择日期" v-model="auditorPostponeTime"> </el-date-picker>
data(){return{auditorPostponeTime:'',}
}let times = '';if (this.auditorPostponeTime) {times = parseTime(this.auditorPostponeTime, '{y}-{m}-{d}');}let req={auditorPostponeTime: times, //同意选择的时间}

五,注意:代码中必须要引入date.js文件,并在方法中使用即可,否则以上不成立

  import { parseTime } from "@/utils/date";

(1)创建一个date.js文件,内容如下:

/*** Parse the time to string* @param {(Object|string|number)} time* @param {string} cFormat* @returns {string | null}*/
export function parseTime(time, cFormat) {if (arguments.length === 0) {return null}const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {time = parseInt(time)}if ((typeof time === 'number') && (time.toString().length === 10)) {time = time * 1000}date = new Date(time)}const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()}const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {const value = formatObj[key]// Note: getDay() returns 0 on Sundayif (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }return value.toString().padStart(2, '0')})return time_str
}/*** @param {number} time* @param {string} option* @returns {string}*/
export function formatTime(time, option) {if (('' + time).length === 10) {time = parseInt(time) * 1000} else {time = +time}const d = new Date(time)const now = Date.now()const diff = (now - d) / 1000if (diff < 30) {return '刚刚'} else if (diff < 3600) {// less 1 hourreturn Math.ceil(diff / 60) + '分钟前'} else if (diff < 3600 * 24) {return Math.ceil(diff / 3600) + '小时前'} else if (diff < 3600 * 24 * 2) {return '1天前'}if (option) {return parseTime(time, option)} else {return (d.getMonth() +1 +'月' +d.getDate() +'日' +d.getHours() +'时' +d.getMinutes() +'分')}
}/*** @param {string} url* @returns {Object}*/
export function param2Obj(url) {const search = url.split('?')[1]if (!search) {return {}}return JSON.parse('{"' +decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"').replace(/\+/g, ' ') +'"}')
}

Vue--时间戳转换日期格式相关推荐

  1. VUE时间戳转换日期格式

    VUE时间戳转换日期格式 vue文件 vue文件 <el-descriptions-item label="时间">{{ fromData.sortTime | for ...

  2. vue.js 时间戳转换日期格式

    时间戳可以理解为过滤器的一种方式,日期格式的转换在项目中也经常遇到,今天我来总结项目中踩过的坑,以及解决方法. 时间戳转换日期格式有三种方法: 方式一 运行 cmd 执行 npm install mo ...

  3. 时间戳转换日期格式(代码示例)

    这里使用的是DateUtil工具类,它会将时间戳转换日期格式,需要的时候调用它就好了 DateUtil工具类 public class DateUtil {public static String t ...

  4. 一分钟快速上手uni-app时间戳转换日期格式

    uni-app时间戳转换日期格式 1.通过请求获取的数据如下(时间戳) 2.需求中的时间格式: 3.使用的方法:过滤器过滤 这里包涵了时分秒,如果不需要自行删除 过滤器的参数第一个默认是过滤的数据,第 ...

  5. java时间戳转换日期格式_Java时间戳与日期格式字符串的互转

    1 import java.text.SimpleDateFormat; 2 import java.util.Date; 3 4 public class DateUtil { 5 /** 6 * ...

  6. pd_to_datetime将时间戳转换日期格式,日期不正确

    一.问题描述 笔者需要将时间戳数据转换成日期格式,使用的是pd_to_datetime进行转换,得到了如下图结果 data["date_"] = pd.to_datetime(da ...

  7. java-学习笔记-java时间戳转换日期格式

    import java.text.SimpleDateFormat; import java.util.Date;public class DateUtil {/** * 时间戳转换成日期格式字符串 ...

  8. python将时间戳转化为时间格式_python时间戳转换日期格式的方法是什么

    日期和时间的相互转换可以利用Python内置模块time和datetime完成,且有多种方法供我们选择,当然转换时我们可以直接利用当前时间或指定的字符串格式的时间格式. 获取当前时间转换 我们可以利用 ...

  9. layui表格时间戳转换日期格式

    今天接到一个需求,让前端自己在layui表格上将时间戳转换成日期格式.本来是后台整的,后台整不动了,就换成前台了.解决问题也很简单只需要加这行代码就好了 templet : " {{layu ...

  10. 微信小程序时间戳转换日期格式

    微信小程序 时间戳转换为日期时间格式: 注意:javascript中使用var tem= new Date(time);在wxs中应使用getDate()方法 wxs文件 function time_ ...

最新文章

  1. 平衡二叉树-AVL c/c++代码实现
  2. 64位系统上使用*** Client端
  3. Postman for Linux(x86)
  4. 为自己而活,这很难吗?
  5. Java BIO、NIO、AIO的区别
  6. 基于live555实现的RTSPServer对底层进行性能优化的方法
  7. powerdesigner连接mysql,并导出其数据模型的方法
  8. 微信开发者工具打开导入其他人的项目源码 修改appid
  9. MD4、MD5、SHA1、HMAC、HMAC_SHA1区别
  10. 电脑蓝屏:缺少bootsafe64_ev.sys
  11. VMware中安装win7虚拟机后共享问题的解决
  12. 千兆网线做法和网线接法注意事项
  13. 利用pandas将Excel分组比较获取差集并
  14. 软件构造期末复习知识点整理
  15. BZOJ1499: [NOI2005]瑰丽华尔兹
  16. 深圳搬家为什么要那么多注意事项
  17. 华为正式发布HarmonyOS 3开发者预览版
  18. wegame饥荒一直登录中_WeGame到底有多难用?“LOL大神自己编写一个插件,完美代替WG”...
  19. 有哪些读书学不来,却很重要的素质?
  20. javax.el.PropertyNotFoundExceptionProperty 'Tid' not found on type com.msz.sims.domain.Teacher

热门文章

  1. python 快速排序算法
  2. 简述@GetMapping、@PostMapping和@RequestMapping的区别
  3. hikari如何切换数据源_Hikari 数据源参数配置说明
  4. 老CRT显示器太暗,给亮起来
  5. 【shell】shell脚本Linux环境mutt发送邮件(实现单邮件循环发送和根据条件循环发送)
  6. 一个计算机专业学生几年的编程经验汇总 (该系列一共 11 篇,看完之后,java 基础绝对有不小的提升!)
  7. CSS Mastery: Advanced Web Standards Solutions
  8. windows server 2008 系统服务详解和优化配置
  9. 软件安装与卸载 yum rpm
  10. 高一英语人教修订版上学期期末试题试题