Vue如何将时间戳转换日期格式

 更新时间:2023年09月21日 15:38:55   作者:LW0512  
这篇文章主要介绍了Vue如何将时间戳转换日期格式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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, ' ') +
    '"}'
  )
}

到此这篇关于Vue时间戳转换日期格式的文章就介绍到这了,更多相关Vue时间戳转换日期格式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 两个字段联合校验之修改密码功能的实现

    Vue 两个字段联合校验之修改密码功能的实现

    本文以校验两次密码的一致性应用,给出两个可变属性值的字段之间的联合校验的典型解决方案,通过实例代码给大家介绍Vue 两个字段联合校验之修改密码功能的实现,需要的朋友一起看看吧
    2021-07-07
  • vue组件学习教程

    vue组件学习教程

    这篇文章主要为大家详细介绍了vue组件学习教程,根据Vue官方文档学习的笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 详解如何使用Vue2做服务端渲染

    详解如何使用Vue2做服务端渲染

    本篇文章主要介绍了如何使用Vue2做服务端渲染 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vuedraggable实现拖拽功能

    vuedraggable实现拖拽功能

    这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue中使用Ueditor的示例详解

    Vue中使用Ueditor的示例详解

    这篇文章主要介绍了Vue中使用Ueditor的方法,本文通过实例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 使用Vue实现带拖动和播放功能的时间轴

    使用Vue实现带拖动和播放功能的时间轴

    这篇文章主要为大家详细介绍了如何使用Vue实现带拖动和播放功能的时间轴,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • vue如何自定义封装API组件

    vue如何自定义封装API组件

    这篇文章主要介绍了vue如何自定义封装API组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue中加载天地图的离线地图基本步骤

    Vue中加载天地图的离线地图基本步骤

    这篇文章主要给大家介绍了关于Vue中加载天地图的离线地图的基本步骤,Vue天地图离线地图是指基于Vue框架开发的应用程序,使用天地图离线地图服务提供商提供的地图数据,可以在没有网络的情况下使用地图功能,需要的朋友可以参考下
    2023-10-10
  • vue 使用el-table循环生成表格的过程

    vue 使用el-table循环生成表格的过程

    这篇文章主要介绍了vue 使用el-table循环生成表格的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3编程流畅技巧使用setup语法糖拒绝写return

    Vue3编程流畅技巧使用setup语法糖拒绝写return

    这篇文章主要为大家介绍了Vue3编程流畅技巧使用setup语法糖拒绝写return的方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论