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

    2021-10-29 10:49:42
    //时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化 dateFormat(time) { var date = new Date(time) var year = date.getFullYear() /* 在日期格式中,月份是从0开始的,因此要加0 * 使用三元...
        //时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
        dateFormat(time) {
          var date = new Date(time)
          var year = date.getFullYear()
          /* 在日期格式中,月份是从0开始的,因此要加0
           * 使用三元表达式在小于10的前面加0,以达到格式统一  如 09:11:05
           * */
          var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
          var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
          var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
          var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
          var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          // 拼接
          return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
        },
    

    调用方式

    this.dateFormat(new Date()) 
    
    展开全文
  • 本篇文章主要介绍了vue时间格式化实例代码,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 格式化时间字符串 formatTime

    万次阅读 2019-07-04 15:32:45
    filters: { formatTime: function (date, fmt) { var date = new Date(date); if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, ...收录日期:{{item.data.BiRelDate | formatTime('yyyy-MM-dd')}}  
    filters: {
                formatTime: function (date, fmt) {
                    var date = new Date(date);
                    if (/(y+)/.test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                    }
                    var o = {
                        'M+': date.getMonth() + 1,
                        'd+': date.getDate(),
                        'h+': date.getHours(),
                        'm+': date.getMinutes(),
                        's+': date.getSeconds()
                    };
                    for (var k in o) {
                        if (new RegExp('('+k+')').test(fmt)) {
                            var str = o[k] + '';
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
                        }
                    }
                    return fmt;
                }
            }
    <span>收录日期:{{item.data.BiRelDate | formatTime('yyyy-MM-dd')}}</span>

     

    展开全文
  • VUE 格式化日期格式

    千次阅读 2020-09-06 21:10:47
    // 格式化日期格式 1 filters: { formatDate: function (value) { let date = new Date(value); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) :
    // 格式化日期格式 1
            filters: {
                formatDate: function (value) {
                    let date = new Date(value);
                    let y = date.getFullYear();
                    let MM = date.getMonth() + 1;
                    MM = MM < 10 ? ('0' + MM) : MM;
                    let d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    let h = date.getHours();
                    h = h < 10 ? ('0' + h) : h;
                    let m = date.getMinutes();
                    m = m < 10 ? ('0' + m) : m;
                    let s = date.getSeconds();
                    s = s < 10 ? ('0' + s) : s;
                    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
                }
            },
    使用:<span>{{scope.row.createTime | formatDate}}</span>      
    
    //格式化日期格式 2
                dateFormat(data){
                    var date = new Date(data);
                    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());
                    return YY + MM + DD;
                },
    
    
    展开全文
  • 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 ...

    1、moment.js插件的使用

    后端传了一个 2020-11-27T12:01:50.942 00:000 这样的时间过来,结果我发现我之前用的时间过滤器竟然不能把这个时间转化成正确时间,于是就发现moment.js这个插件啦~
    同时,感谢一个up主的文章解惑。原来,前端从mysql取出timestamp类型的时间与实际时间差8小时。

    安装:

    npm install moment
    

    引入(局部):

    import moment from 'moment'
    

    把后台获取到的时间直接格式化,在丢到data中

    time: moment(elem.gmtCreate).format('YYYY-MM-DD hh:mm:ss'),
    

    2、定义一个时间过滤器

    在main.js文件中,定义一个时间过滤器

    // 定义一个过滤器 处理时间
    Vue.filter('dateFormat', function (originVal) {
      const dt = new Date(originVal)
      const y = dt.getFullYear()
      // 月份从0开始,使她变成字符串,不足两位时,前面补个0.
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })
    

    在需要转化时间的组件中直接使用:

     <template slot-scope="scope">
                {{scope.row.add_time | dateFormat}}
     </template>
    

    3、封装一个time.js文件

    创建一个time.js文件:

    /**
     * @param {Function} fn 防抖函数
     * @param {Number} delay 延迟时间
     */
    export function debounce (fn, delay) {
      var timer
      return function () {
        var context = this
        var args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          fn.apply(context, args)
        }, delay)
      }
    }
    
    /**
     * @param {date} time 需要转换的时间
     * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
     */
    export function formatTime (time, fmt) {
      if (!time) return ''
      else {
        const date = new Date(time)
        const o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'H+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          S: date.getMilliseconds()
        }
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        }
        for (const 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
      }
    }
    
    

    在data中:

     dateDay: null,
     dateYear: null,
     dateWeek: null,
     weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    

    在script中引入time.js

    import { formatTime } from '../utils/time.js'
    

    在created(){}中:

    this.timeFn()
    

    在methods中:

    timeFn () {
          setInterval(() => {
            this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
            this.dateWeek = this.weekday[new Date().getDay()]
            this.dateDay = formatTime(new Date(), 'HH: mm: ss')
          }, 1000)
        },
    

    在template把时间渲染在页面上:

     <div>{{dateYear}}{{dateWeek}}{{dateDay}}</div>
    

    4、直接转换

    此转换出来的结构为,如: 2020/11/30 下午3:06:15

     const date = new Date().toLocaleString()
     this.dialogData = {}
     this.dialogData.now = date
    

    5、实时显示时间

    <template>
      <div>{{date}}</div> //放置时间
    </template>
    
    <script>
    export default {
      data () {
        return {
          date: new Date()
        }
      },
      mounted () {
        // 声明一个变量指向Vue实例this,保证作用域一致
        let _this = this
        this.timer = setInterval(() => {
          // 修改数据date
          _this.date = new Date().toLocaleString()
        }, 1000)
      },
      beforeDestroy () {
        if (this.timer) {
          // 在vue实例销毁前,清除我们的定时器
          clearInterval(this.timer)
        }
      }
    }
    </script>
    

    6、10位/13位时间戳转日期

    export function timestampToTime (timestamp) {
      let date
      //判断是否为空,空值的话 会报错
      if (timestamp == null) return
      //时间戳为10位需*1000,时间戳为13位的话不需乘1000
      timestamp.length === 10 ? date = new Date(parseInt(timestamp * 1000)) : date = new Date(parseInt(timestamp));
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? `0${(date.getMonth() + 1)}` : date.getMonth() + 1) + '-';
      let D = date.getDate() + ' ';
      let h = date.getHours() + ':';
      let m = (date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()) + ':';
      let s = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
      return Y + M + D + h + m + s;
    }
    
    
    let a = "1624945115227" 
    console.log(timestampToTime(a))
     //打印出 2021-06-29 13:38:35
    
    

    七、日期转13位时间戳

     Date.parse(time)
    
    展开全文
  • vue格式化日期

    2020-09-21 10:28:54
    vue格式化日期 1.Table2.方法总结 文章目录1.Table2.方法总结 1.Table 代码如下(示例): field: 'ACCESS_DATE', title: '访问时间', templet: function (e) { var date = e.ACCESS_DATE; console.log(date);...
  • 1.后台格式化时间 SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String currentDate = df.format(entity.getEffectDate()); 2.vue前台 // 获取当前时间函数 nowTimes() { let year = ...
  • vue js日期时间格式化

    千次阅读 2019-10-10 23:51:12
    使用vue开发中,后台传过来的数据含有时间日期的通常前端都要做进一步做处理或者格式化,常用的是使用filter来过滤数据,换一种思路,前端拿到的时间日期数据一般是一串数字的时间戳,或者是一个字符串的时间日期,...
  • 格式化时间的插件库 点击进入 moment.js网址,在这里可以找到需要引入的script标签 点击进入 moment.js的文档在文档中可以找到对应的格式和例子 此文来源于:...
  • 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...
  • 一、本节说明 在使用插值表达式的时候,我们通常会有一种...全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据。对于{{message|date-format('yyyy-mm-dd')}}而言,参数i
  • 在src下创建一个文件plugins的文件,如图 在里面的format.js文件下写入 ...将startLimit参数格式化 this . startLimit = format ( this . startLimit , 'YYYY-MM-DD HH:mm:ss' )
  • 主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue格式化日期方法

    千次阅读 2019-02-15 14:15:58
    调用举例 this.formatter('Fri Feb 01 2019 00:00:00 GMT+0800', 'yyyy-MM-dd hh:mm:ss') ... fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))...代码已经进行过格式调整
  • vue时间格式化

    千次阅读 2020-12-22 18:26:07
    export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - ... 在你的需要格式化时间戳的组件里像下面这样使用: {{time | formatDate}}
  • 本文实例为大家分享了vue使用过滤器格式化日期的具体代码,供大家参考,具体内容如下案例要求 案例讲解1、查看未过滤格式化的日期格式2、设置模板函数format 接收日期值和日期格式3、按照日期格式对日期进行拼接并...
  • vue时间格式化方法

    2020-10-27 09:59:57
    vue 项目中 使用elementui中的时间选择器时候,我们拿到时间数据不一定是转换后的格式,这时候就需要将时间格式转换后,再向后台传参、请求 直接在methods里定义 dateFormat(time) { let date = new Date(time...
  • Vue.js filter格式化时间戳时间成标准日期格式的方法发布于 2020-2-27|复制链接分享一篇关于Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧调用...
  • 今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue日期格式化实例

    万次阅读 2018-03-29 14:14:31
    这段代码是我常用来格式化日期用的,很好用。 Date.prototype.toLocaleString = function () { // 重写日期函数格式化日期 return `${this.getFullYear()}-${this.getMonth() + 1 &amp;amp;amp;gt;= 10 ? ...
  • 基于vue时间格式化

    2021-08-30 10:50:32
    在使用vue的开发中由于在后端取到的时间date在前端显示是2021-08-24T16:00:00.000+00:00这种格式然而我们开发要求是要2021-08-24这种格式所以我们得想办法...2.在vue使用格式化插件moment 使用yarn命令安装moment..
  • 插件 https://github.com/brockpetrie/vue-moment 安装 ...import Vue from 'vue' const moment = require('moment') // 中文 require('moment/locale/zh-cn') Vue.use(require('vue-moment'),{ ...
  • vue时间日期格式化

    千次阅读 2018-11-28 17:48:40
    // 对Date的扩展,将 Date 转化为指定格式的String // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==&gt; 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s...
  • 时间格式:/Date(1567138282927)/js格式化为日期格式:newDate(parseInt('/Date(1567138282927)/'.substr(6,13)));js格式化为短日期格式:newDate(parseInt('/Date(1567138282927)/'.substr(6,13)))....
  • 主要介绍了vue格式化时间过滤器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 关于 vue 时间格式化

    2021-01-14 06:28:50
    关于vue element-ui组件 时间格式转换下载moment.jsnpm install moment --save1,在组件中prop="createTime":formatter="dateFormat"label="创建时间">用 ':formatter' 来绑定 设置时间格式的方法dateForma2,在...
  • VUE格式化日期

    2021-03-02 16:59:30
    需要使用插件:moment – npm 安装(–save表示保存到package.json中) ... "vue": "^2.6.10", }, 方式一: 1 main.js中定义全局变量 import moment from 'moment' Vue.prototype.$moment = moment 2 组件中的使用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 29,302
精华内容 11,720
关键字:

vue格式化日期

vue 订阅
友情链接: t6u3vw.ZIP