Vue--时间戳转换日期格式_vue时间戳转换日期格式_LW0512的博客-程序员秘密

技术标签: 时间戳  vue  vue.js  

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-picker
            v-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 date
  if (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 Sunday
    if (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) / 1000

  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    // less 1 hour
    return 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, ' ') +
    '"}'
  )
}


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/LW0512/article/details/120287699

智能推荐

解决java的web项目部署到tomcat服务器但在wtpwebapps文件夹中找不到项目的问题_tomcat部署找不到项目_汐汐同学呀的博客-程序员秘密

就在前几天,正在编写的一个web项目,虽然可以正常的部署、运行,但是我去tomcat安装路径中找,却找不到我已经部署了的web项目,那我的web项目到底部署到哪里了呢?昨天找了老师问了一下,终于清楚了,这里和大家分享一下。首先我们要知道以下内容1、 我们如何部署一个web文件(常规):&lt;1&gt; 为要部署的web文件设置Targeted Runtimes,选定你要使用的服务器,右键项...

2021年中职组网络安全山东省市赛mssql提权题目解析_ruihack的博客-程序员秘密

综合渗透测试-使用SMB服务漏洞结合NTLM中继进行渗透测试首先我们来看一下环境:Ip获取失败:我们用nmap扫描靶机:看到这么多可以利用的端口,我们先来看一下80端口:没有获取到什么特别有用的信息。我们接着看一下smb服务:看到一个可疑的文件。我们接着来看一下这个文件:看到有一个这个文件xlsm,可能存在宏启动,下载下来:宏启动:简单的来说就是隐藏在xlsm文件中的一些代码:我们现在从文件中来找到宏启动:这时就可以

Neo4j安装_一碗烫烫的汤圆的博客-程序员秘密

最讨厌安装一堆乱七八糟的东西1、下载neo4j社区版:https://neo4j.com/download/other-releases/#releases然而下到一半:最后求助万能的百度云,下载下来了。当然过了几天,不知道为何,又成功了?大概率是人品+网速问题。解压到E盘,环境变量:NEO4J_HOME:E:\neo4j-community-4.0.1Path:%NEO4J_HOME%\bin;2、下载jdk没错,越新越好,旧的不行。环境变量:JAVA_HOME

Python Opencv 计算几何相关 API_GondorFu的博客-程序员秘密

PythonOpencv 计算几何相关 APIOpencv 中有很多常用的计算几何 API,比如轮廓,连通性,最小外接矩形,多边形填充,多边形内外判断等。这些函数很实用,但参数较多,使用时经常需要现在网上查找。因此,为提高效率,写了这篇文章进行总结。连通性对于一个 8-bit 单通道图片获取每个像素点的连通性def connectedComponents(image, labels=None, connectivity=None, ltype=None): # real signatur.

KGDB调试汇总_kgdb 查看gdtr_b0207191的博客-程序员秘密

KGDB调试汇总通过KGDB,可以在内核代码中设置断点,单步调试和观察变量;为了使用KGDB,需要有两个系统,一个称为开发机,一个称为目标机,被调试的内核运行于目标机上,同时开发机与目标机不要求有相关的体系结构,两者通过串口连接。目的:在某嵌入式设备中使用kgdb对内核的调试gdb+gdbserver用来调试用户程序gdb+kgdb用来调试内核如何共用串口1)在PC机安装C...

随便推点

深度理解基本图搜索算法_test_touch的博客-程序员秘密

 这篇随笔是在综合看了多本书,包括算法导论,人工智能等之后,写自己的一些感悟。  适合的读者:如果你已经能够思路清晰的回答以下问题,那么请直接忽略本文~l  A*,BFS,DFS算法的实现思路?l  A*,BFS,DFS算法本质上最主要的不同点?以上可以看做是随便的摘要,将从以下几个部分展开:图的基本表示图搜索问题本身的抽象图搜索三种基本算法,BFS,DFS,A*...

FFplay文档解读-39-视频过滤器十四_【零声教育】音视频开发进阶的博客-程序员秘密

这可以提高非常干净的源材料的准确度,但更有可能降低精度,尤其是在存在色度噪声(彩虹效应)或任何灰度视频的情况下。此过滤器在没有锁定到要跟随的模式的意义上是无状态的,但它反过来期待以下字段以识别匹配并重建渐进帧。此外,它假设两个输入具有相同的帧数,逐个进行比较。程序源文件必须包含具有给定名称的内核函数,该函数将针对输出的每个平面运行一次。应用简单的转换,使用索引计数器增加一个量的输入。为获得最佳结果(输出文件中没有重复的帧),必须更改输出帧速率。,则打印的文件包含表单键的键/值对序列:每个比较的帧对的值。

Canvas---Canvas绘制钟表,仪表盘_MIKUScallion的博客-程序员秘密

Canvas绘制钟表,仪表盘。《HTML5 Canvas核心技术》这本书在代码方面,没有丝毫注解,我感觉看的挺费劲,如果你想买书的话,最好还是先下本pdf看看吧。下面是表盘的绘制图解函数顺序是按照上图的顺序来写的,最后我为仪表加上了样式。源代码: canvas{ bord

ACM/ICPC 之 数论-费马大定理(HNUOJ 13371)_disuo8001的博客-程序员秘密

  好歹我是数学专业的学生,还是要写写训练的时候遇到的数学问题滴~~  在ACM集训的时候在各高校OJ上也遇见过挺多的数学问题,例如大数的处理,素数的各种算法,几何问题,函数问题(单调,周期等性质),甚至是各种数学定理或公式的变形。其实算法本身也属于数学研究的范畴(计算机本就是数学的衍生嘛),诸如众多排序算法,搜索算法也是许多精巧的数学逻辑思维,所以大家学计算机千万别忽视数学这门基础...

【转】浅谈 C++ 中的 new/delete 和 new[]/delete[]_c++中new和delete_m4sean的博客-程序员秘密

【转载】浅谈 C++ 中的 new/delete 和 new[]/delete[] 感谢原作者分享(侵删)在 C++ 中,你也许经常使用 new 和 delete 来动态申请和释放内存,但你可曾想过以下问题呢?new 和 delete 是函数吗?new [] 和 delete [] 又是什么?什么时候用它们?你知道 operator new 和 operator delete 吗?为什么 new ...

数据结构 作业答案 第3章 栈和队列_Haust Haust_WCY的博客-程序员秘密

**第3章 栈和队列**1.选择题(1)若让元素1,2,3,4,5依次进栈,则出栈次序不可能出现在( )种情况。A.5,4,3,2,1 B.2,1,5,4,3 C.4,3,1,2,5 D.2,3,5,4,1答案:C答案解析:栈是后进先出的线性表,不难发现C选项中元素1比元素2先出栈,违背了栈的后进先出原则,所以不可能出现C选项所示的情况。(2)若已知一个栈的入栈序...

推荐文章

热门文章

相关标签