精华内容
下载资源
问答
  • vue 修改时间格式

    2020-12-17 10:20:47
    在我们在书写vue组件的过程中,我们往往需要针对时间格式的各种格式来回切换,这次我们说一说时间戳转换成时间字符串的方法 假如后台给我们返回了一个时间字段(假设字段为date),但是他返回的是时间戳,那我们想...

    在我们在书写vue组件的过程中,我们往往需要针对时间格式的各种格式来回切换,这次我们说一说时间戳转换成时间字符串的方法

    假如后台给我们返回了一个时间字段(假设字段为date),但是他返回的是时间戳,那我们想要显示成XXXX-XX-XX这种格式就需要针对时间戳进行转换方法

    formatDate(time) {
        if(null !== time){
            var date = new Date(time)
            var YY = date.getFullYear() + '-'
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)+ '-'
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
            // var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
            // var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
            // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
            return YY + MM + DD
        }else{
            return null
        }
      }

    上面这个方法就是将时间戳转换为YY-MM-DD的格式的方法,this.formatDate(date)这样的话就可以把date这个参数从时间戳转换成字符串啦

    若我们想换成YY年MM月DD日这样的方法也可以换个字就可以了

    若后台返回的本身就是YY-MM-DD hh:mm:ss这样格式的时间,而我们只需要对后台返回的参数(假设后台返回的参数为date)进行截取就可以啦

    date.subString(0,10)这个方法直接可以让date这个参数显示成YY-MM-DD的格式啦

    有别的问题可以继续讨论呀~

    展开全文
  • vue开发前端如何改变时间格式

    千次阅读 2020-10-20 15:14:55
    数据库中的时间字段的数据类型为timestamp,传到前端后变为2020-10-11T16:00:00.000+0000,想要变为2020-10-17 04:02:01显示出来,rendertime方法实现了这个功能,具体参考...

    数据库中的时间字段的数据类型为timestamp,传到前端后变为2020-10-11T16:00:00.000+0000,想要变为2020-10-17 04:02:01显示出来,rendertime方法实现了这个功能,具体参考https://blog.csdn.net/lqq404270201/article/details/104358933?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

    renderTime: function (date) {//rendertime方法,可以把2020-10-11T16:00:00.000+0000形式的时间转化为2020-10-17 04:02:01
          var dateee = new Date(date).toJSON();
          return new Date(+new Date(dateee) + 8 * 3600 * 1000)
            .toISOString()
            .replace(/T/g, " ")
            .replace(/\.[\d]{3}Z/, "");
        },
        findAllOrder: function () {
          this.$axios
            .get("findAllOrder", {
              params: {
                ID: 8,
              },
            })
            .then((response) => {
              if (response.data.statusCode == 200) {
                console.log(response);
                this.tableData = response.data.data;//tableData和表格中的v-model绑定
    
                // for (var i in this.tableData) {//这种方法遍历是不行的
                //   console.log(i);
                //   i.sotime = this.renderTime(i.soTime);
                // }
                for (let i = 0; i < response.data.data.length; i++) {
                  console.log(response.data.data[i]);
                  this.tableData[i].soTime = this.renderTime(
                    response.data.data[i].soTime//调用renderTime方法
                  );
                }
              }
            })
            .catch((error) => {
              // alert(error);
              console.log(error);
            });
        },
    
    展开全文
  • vue中的时间格式处理

    千次阅读 2019-06-13 16:56:00
    开始时间 " :value= " startDate | formatDate " > 方法二:引入vue插件moment (一)npm安装 npm install moment --save (二)在main.js上引入,挂载在vue上  import moment from 'moment' ...

    方法一:自定义文件

    (一)函数封装(将该函数封装成一个文件,或者加入自己项目的函数库)

    (二)文件引入(注意:由于是函数,故名字要和函数的名字一致)

    import { formatDate } from '@/utils/date'

    (三)添加到过滤器中

      filters: {
        formatDate(time) {
          let date = new Date(time)
          return formatDate(date, 'yyyy-MM-dd')
        }
      }

    (四)使用场景一: 在HTML中使用

    // item.createdate是后台数据~~
    <div class="bottomTimee fz12 c_9a">{{item.createdate | formatDate}}</div>

    (五)使用场景二: 在提交时候使用

    let nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')

    (六)使用场景三: 在绑定属性中使用

    <mt-cell title="开始时间" :value="startDate | formatDate"></mt-cell>

    方法二:引入vue插件moment

    (一)npm安装

    npm install moment --save

    (二)在main.js上引入,挂载在vue上

      import moment from 'moment'
    Vue.prototype.$moment = moment

    (三)在html中使用

    <div class="title">{{$moment(key).format('YYYY-MM-DD')}}</div>

     

    转载于:https://www.cnblogs.com/qdlhj/p/11017656.html

    展开全文
  • vue日期格式处理

    千次阅读 2018-12-16 15:05:06
    项目开发中,由于后台返回的数据是时间戳,所以前台需要有一哥统一处理日期。 举例:后台返回时间戳:...Transfer将时间戳转换成Date类型,Format第一个参数为日期格式,第二个参数为可选,当日期为nul...

    项目开发中,由于后台返回的数据是时间戳,所以前台需要有一哥统一处理日期。

    举例:后台返回时间戳:1544942468922

    Document

    Date.Transfer(time).Format('yyyy-MM-dd', /*optional*/ nullValueShow)

    Transfer将时间戳转换成Date类型,Format第一个参数为日期格式,第二个参数为可选,当日期为null/undefined,需要显示的文字信息。

    /**
     * Util.js
     */
    
    // date原型链对象添加format方法,用于format日期格式
    Date.prototype.Format = function (fmt) {
      var o = {
        'M+': this.getMonth() + 1, // 月份
        'd+': this.getDate(), // 日
        'h+': this.getHours(), // 小时
        'm+': this.getMinutes(), // 分
        's+': this.getSeconds(), // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        'S': this.getMilliseconds() // 毫秒
      }
    
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
    
      return fmt
    }
    
    // Date对象Transfer对象,将时间戳转换成日期对象
    Date.Transfer = function (timeSpan) {
      if (!timeSpan) {
        return new FormatDateNullValue()
      }
    
      return new Date(timeSpan)
    }
    
    // 创建对象用于date为null值的format
    function FormatDateNullValue () { }
    
    FormatDateNullValue.prototype.Format = function (date, value) {
      if (value) return value
      return '无'
    }
    
    
    <template>
      <!-- 父组件 -->
      <div class="app-container">
        <h3>{{Date.Transfer(time).Format('yyyy-MM-dd')}}</h3>
        <h3>{{Date.Transfer(timeNUll).Format('yyyy-MM-dd')}}</h3>
        <h3>{{Date.Transfer(timeCustomerNullValue).Format('yyyy-MM-dd', '自定义无值情况下显示的值')}}</h3>
      </div>
    </template>
    
    <script>
    import './Utils'
    
    export default {
      components: {
      },
      mounted() {},
      data() {
        return {
            time: 1544942468922,
            timeNUll: null,
            timeCustomerNullValue: null
        };
      }
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

     

    不使用Date.prototype

    写完以后本以为可以使用了,可惜eslint的检测里有着不允许在Date.prototype操作,也是尴尬。

    所以只有修改代码了:

    /**
     * Util.js
     */
    
    // date原型链对象添加format方法,用于format日期格式
    var transfer = function (fmt) {
      var o = {
        'M+': this.getMonth() + 1, // 月份
        'd+': this.getDate(), // 日
        'h+': this.getHours(), // 小时
        'm+': this.getMinutes(), // 分
        's+': this.getSeconds(), // 秒
        'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
        'S': this.getMilliseconds() // 毫秒
      }
    
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
    
      return fmt
    }
    
    // Date对象Transfer对象,将时间戳转换成日期对象
    Date.CustomerDateFormat = function (timeSpan, fmt, formatDateNullValue) {
      if (!timeSpan) {
        if (formatDateNullValue) {
          return formatDateNullValue
        }
    
        return '无'
      }
    
      var date = new Date(timeSpan)
    
      return transfer.call(date, fmt)
    }
    
    <template>
      <!-- 父组件 -->
      <div class="app-container">
        <h3>{{Date.CustomerDateFormat(time, 'yyyy-MM-dd')}}</h3>
        <h3>{{Date.CustomerDateFormat(timeNUll, 'yyyy-MM-dd')}}</h3>
        <h3>{{Date.CustomerDateFormat(timeCustomerNullValue, 'yyyy-MM-dd', '自定义无值情况下显示的值')}}</h3>
      </div>
    </template>
    
    <script>
    import './Utils'
    
    export default {
      components: {
      },
      mounted() {},
      data() {
        return {
            time: 1544942468922,
            timeNUll: null,
            timeCustomerNullValue: null
        };
      }
    };
    </script>
    
    <style lang="scss" scoped>
    </style>

    写完,还要去公司加个班。

     

    展开全文
  • 这里需要使用到一个插件:moment 1 npm安装(--save表示保存到package.json中) npm install moment --save ...开售时间{{$moment(startAt).format('YYYY-MM-DD HH:mm')}}</div> 就是这...
  • vue日期格式

    千次阅读 2020-12-18 17:16:00
    现有vue页面如下: 需要将日期转换为:2020-12-25 二、实现 修改vue html部分,应用方法dateFormat <el-table-column prop="start_time" label="日期" width="140" :formatter="dateFormat"> </el-table...
  • Vue 表单时间格式

    2021-03-19 09:42:39
    vue-element-admin <el-form-item label="时间" prop="pjsj"> <el-date-picker clearable style="width: 100%" v-model="formyd.pjsj" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format=...
  • vue 转换日期格式

    千次阅读 2018-09-11 16:48:00
    转换日期格式 设置过滤器  filters: {  formatDate(time) {  var date = new Date(time);  return formatDate(date, "yyyy-MM-dd");  }  }   使用方法 <span>{{item.buyTime|...
  • vue时间格式改成“yyyy-MM-dd hh:mm:ss”格式 vue实时显示当前时间显示
  • vue标准时间格式转换

    2020-12-17 14:46:36
    标准时间格式转换 转换时间格式为yyyy-MM-dd hh:mm:ss. formatDate(date,fmt){ let time = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': ...
  • Vue 时间格式设置

    2021-03-12 14:43:34
    Vue 时间格式设置 <el-form-item label="办理时间" prop="date"> <el-date-picker v-model="form.date" type="datetime" format="yyyy/MM/dd hh:mm:ss" value-format="yyyy/MM/dd hh:mm:ss" placeholder...
  • VUE日期格式化与数据格式问题

    千次阅读 2019-10-18 19:24:30
    之前用jalor、ADF等框架做开发,前端控件有数据类型,直接定义date或者datetime就可以显示对应的日期或者日期时间格式。 但是针对VUE+ELEMENTUI 数据显示却没有对应的属性,需要自己定义工具函数进行转换。 页面列表...
  • vue时间插件 中datepicker.js 修改过支持年,年月,年月日的选择
  • vue中将日期转换为指定的格式

    千次阅读 2020-12-16 16:12:59
    vue中将日期转换为指定的格式: 方案一: 这个方法是我觉得特别好用的: 写一个转换日期的方法,直接使用就... /* 在日期格式中,月份是从0开始的,因此要加0 * 使用三元表达式在小于10的前面加0,以达到格式统一 如 0
  • vue中转换时间格式

    千次阅读 2020-08-14 14:36:03
    vue中转化时间格式 首先,提供一个万能函数:这个函数你只要把时间格式传入,就会返回"yyyy... /* 在日期格式中,月份是从0开始的,因此要加0 * 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05 * */
  • <table> <thead> <tr> <th>日期</th> </tr> </thead> .
  • vue 全局处理日期格式

    千次阅读 2018-06-20 14:10:58
    [size=medium][color=green][b]入口文件...import Vue from 'vue' import * as filters from './filters' // register global utility filters. Object.keys(filters).forEach(key => { Vue.filter(key,...
  • 本人最近正在学习uni-app,学习到一个格式化时间日期格式的方法,分享给大家: 创建一个div显示时间 <div id="app"> <div id="date"> {{myDate | format('yyyy-MM-dd hh:mm:ss') }} </div> &...
  • vue.js需要导出Excel文件时,需要的Blob.js和Export2Excel.js
  • Vue 获取当前时间格式

    千次阅读 2020-07-28 14:16:54
    Vue 获取当前时间格式化 现在的代码,一家原创,万家抄袭,嗯,我也是… 直接就是大代码一顿狂粘!!啪啪啪!用去吧! /** * 获取当前时间 * 格式YYYY-MM-DD */ Vue.prototype.getNowFormatDate = function()...
  • vue表格增删

    2019-03-04 09:10:52
    该文件主要以vue.js为主的表格渲染,数据交互。充分的表现了表格的增删查功能,以及vue中input的使用,date日期的选择。
  • vue 格式时间(多种方法)

    千次阅读 2020-11-27 16:24:14
    格式时间: 后端传了一个 2020-11-27T12:01:50.942 00:000 这样的时间过来,结果我发现我之前用的时间过滤器竟然不能把这个时间转化成 yyyy-MM-dd hh:mm:ss,于是就发现moment.js这个插件啦~ 安装: npm install ...
  • vue.js 时间戳转换日期格式

    千次阅读 2020-03-31 14:55:55
    时间戳可以理解为过滤器的一种方式,日期格式的转换在项目中也经常遇到,今天我来总结项目中踩过的坑,以及解决方法。 时间戳转换日期格式有三种方法: 方式一 运行 cmd 执行 npm install moment --save 或者 yarn ...
  • 在此环节,我们使用element-UI中日期选择框: ...注:绑定值获取的格式,需要修改value-format参数,改成日期格式:"yyyy-MM-dd HH:mm:ss","yyyy-MM-dd","HH:mm:ss" <el-date-picker v-
  • vue 获取时间戳对象转换为日期格式

    千次阅读 2019-04-12 14:46:28
    vue.js怎样将时间戳转化为日期格式 //value 格式为13位unix时间戳 //10位unix时间戳可通过value*1000转换为13位格式 function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, ...
  • 时间格式的输出格式是一个UTC通用标准时的格式,什么是UTC通用标准时:UTC即为世界标准时间,世界统一时间,国际协调时间,字母T是时间日期的分隔符,T后面表示的即为时间,末尾的z表示UTC统一时间。而我们需要的...
  • vue json数据格式化显示json格式化显示 json格式化显示 后端需要格式化显示一串json,搜了一下有一些公共组件,vue-json-viewer等等,在开发环境下展示没问题,但一发布整个弹窗都不显示了,提示什么组件异步引入...
  • // 时间格式转换 Vue.filter('dateFormat', function (origin) { const newDate = new Date(origin); const n = newDate.getFullYear(); const y = (newDate.getMonth() + 1 + '').padStart('2', '0'); const r ...
  • vue项目中table表格里毫秒转时间格式 表格组件里有formatter 属性,然后在methods里加上formatDate方法。createTime为接口数据返回的毫秒数值,更加个人项目修改。 <el-table-column align="center" prop=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,198
精华内容 24,879
关键字:

vue改时间格式

vue 订阅