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

    2021-05-31 15:04:53
    <p>HH:mm:ss转换成HH:mm 后端返回的时间是12:00:00,现在只要12:00要怎么转换</p>
  • 在项目中,经常会有后台返回一个时间戳,页面展示用的却是日期格式的情况 不同组件多次使用的话,那么建议在 src 下新建一个 common 文件夹,创建 date.js 文件,方便多次复用 在组件中使用 <p>{{date1 | ...
  • vue时间格式转换

    千次阅读 2020-12-30 11:57:03
    //时间转换 Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '')....

    在写项目中,一般会调用接口,调用接口返回来的时间是一串数字,那么如何处理这些数字呢?
    在这里插入图片描述

    一、在main.js中引入

    //时间转换
    Vue.filter('dateFormat', function (originVal) {
    const dt = new Date(originVal)
    const y = dt.getFullYear()
    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}`
    })
    

    二、在组件中
    在这里插入图片描述
    然后去浏览器看看
    在这里插入图片描述
    发现都是NaN,然后去查找资料

    发现:接口返回的数据是String类型的,需要转换成Number类型

    在这里插入图片描述
    再去浏览器look look
    在这里插入图片描述
    看到时间转换过来了,但是又发现时间对不上,然后查资料

    如果接口返回的数字一共有10位,需要x1000,如果是13位的话,就直接用

    在这里插入图片描述
    浏览器看效果
    在这里插入图片描述
    然后时间就转换成功了,OK!

    展开全文
  • 下面小编就为大家分享一篇vue将时间戳转换成自定义时间格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中将日期转换为指定的格式

    千次阅读 2020-12-16 16:12:59
    vue中将日期转换为指定的格式: 方案一: 这个方法是我觉得特别好用的: 写一个转换日期的方法,直接使用就可以 //时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化 dateFormat:function(time) { ...

    vue中将日期转换为指定的格式:

    方案一:

    这个方法是我觉得特别好用的:
    写一个转换日期的方法,直接使用就可以

    //时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat:function(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;
    }
    

    使用的时候,直接调用:

    {{dateFormat(create_time)}}
    this.dateFormat(new Date())
    

    结果:
    在这里插入图片描述

    方案二:

     vue中使用moment格式转换日期:
    
      1)先安装moment包:npm install moment
    
      2)在组件中引入moment: import moment from "moment"
    
      3)在组件中使用:let str = moment(new Date()).format("YYYY-MM-DD hh:mm:ss") //  2018-04-24 09:55:40
    

    但是这个会有一点问题就是:
    下午的时间,还是1、2、3这种的
    例如:
    下午时间
    2019-1-1 01:10:10

    大家根据需求选择合适的

    展开全文
  • 第一种方法(固定格式转换): Date.prototype.toLocaleString = function () { // 重写日期函数格式日期 return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this...

    第一种方法(固定格式转换):

    Date.prototype.toLocaleString = function () {   // 重写日期函数格式化日期
           return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this.getMonth() + 1)}-${this.getDate() >= 10 ? this.getDate() : '0' + this.getDate()}
                     ${this.getHours() >= 10 ? this.getHours() : '0' + this.getHours()} : ${this.getMinutes()>=10?this.getMinutes():'0'+this.getMinutes()} : ${this.getSeconds() >= 10 ? this.getSeconds() : '0' + this.getSeconds()}`;
                };
    
    使用方法:格式化后的日期 = new Date(这里是传入的毫秒值).toLocaleString();
    
    

    vue中使用

    
        var app = new Vue({
            el: '#app',
            data:{
                time:""
            },
            created() {
                this.time = this.dataFormat(new Date(1522611151000))
    
            },
            methods:{
                dataFormat(time){
                    return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()}
                         ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()} : ${time.getMinutes()>=10?time.getMinutes():'0'+time.getMinutes()} : ${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
                 }
            }
        })
    
    

    第二种方法(根据需要转成不同格式):

    Vue.filter('formatTime',function(thistime,fmt='yyyy-MM-dd hh:mm:ss'){
      let $this = new Date(thistime)
          let 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
    })
    
    使用方法:{{1595215702457 | formatTime('yyyy-MM-dd')}}

    在使用日期过滤器的时候,可以根据需要的日期格式,传入不同的参数,方便灵活,

    希望能帮到大家!

    展开全文
  • vue时间格式转化问题

    万次阅读 2020-05-23 15:46:10
    需求:前台展示一律用的时间规格:yyyy-MM-dd HH:mm:SS,即要求月日时分秒小于两位数的都要补0,这样显得整体化一。所以下面就是专门对月日时分秒小于10时做补0的处理,实际刚开始想到的就是直接挨个判断月日时分秒&...

        1. 效果图:

      

        2. 需求:前台展示一律用的时间规格:yyyy-MM-dd HH:mm:SS,即要求月日时分秒小于两位数的都要补0,这样显得整体化一。所以下面就是专门对月日时分秒小于10时做补0的处理,实际刚开始想到的就是直接挨个判断月日时分秒<10时,直接拼接0的想法,被同事打断了,这个方法太繁琐了。所以发现了以下简洁的方法,据说是es6中的函数用法,还没有去具体查询出处,先用着再说吧。接下来分析代码.

         可以把它写在一个单独的js中,这样就可以写在公共方法里,大家都可以调用的那种,当然也可以写在你需要地方的方法里,按照自己的实际情况来

          ①写在公共方法里

            可以在工具文件夹底下新建一个data.js,如下:

       代码部门:

    其中Vue.prototype是将formatDate这个方法设置问全局方法,这样就都可以调用了,注意方法名名为formatDate,后面用

    /**
     * Created by syp on 2020/5/15.
     */
    
    exports.install = function (Vue, options) {
      Vue.prototype.formatDate = function (row, column) {
        let data = row[column.property]
        if (data == null) {
          return null
        }
        let dt = new Date(data)
        let yyyy = dt.getFullYear()
        let MM = (dt.getMonth() + 1).toString().padStart(2, '0')
        let dd = dt.getDate().toString().padStart(2, '0')
        let h = dt.getHours().toString().padStart(2, '0')
        let m = dt.getMinutes().toString().padStart(2, '0')
        let s = dt.getSeconds().toString().padStart(2, '0')
        return yyyy + '-' + MM + '-' + dd + ' ' + h + ':' + m + ':' + s
      }
    }

      处理好data.js后,再在公共js中调用一下,设置为全局的,这样大家就都可以用了

    然后在vue页面进行调用图:

    :formatter="formatDate"

    formatDate就是设置为全局方法的方法名 

       ②将它只是变为局部的格式化时间调用,那么就需要把格式化时间的代码放在调用页面的方法中

    一下这个方法只需要放在本页面的method底下就好了

    formatDate (row, column) {
            let data = row[column.property]
            if (data == null) {
              return null
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
          },

    在列表展示的熟悉中运用和上面一样都用:formatter="formatDate"就ok了。

    图示:

    展开全文
  • Vue时间格式转换

    2021-01-08 10:14:24
    时间格式转换 SimpleDateFormat .js export default class SimpleDateFormat { constructor(pattern) { this.pattern = pattern; } pattern = "yyyy_MM_dd HH:mm:ss"; parse = function (source) { try { ...
  • 本方法通过vue.js filter实现将unix时间戳转换为自定义标准时间格式 <!-- js代码 --> $().ready(function() { <!-- 自定义filter名称为'time' --> Vue.filter('time', <!-- value 格式为13位unix...
  • 主要介绍了vue获取时间戳转换日期格式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 但是我们要的是转换成像这样的日期时间: 代码 第一步:创建一个js文件,复制进去。 /** * @param {date} time 需要转换时间 * @param {String} fmt 需要转换格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss */ ...
  • 今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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/js

    千次阅读 2019-01-02 11:36:26
    时间格式有很多种:yyyy-MM-dd 或者 yyyy.MM.dd 或者yyyy/MM/dd 他们之间想要互相转换的话: 封装方法 //封装时间格式 function: format(time, format) { var t = new Date(time); var tf = function (i) { ...
  • 主要介绍了Vue.js 时间转换代码及时间戳转时间字符串,需要的朋友可以参考下
  • VUE-日期选择器-UTC时间格式转换

    千次阅读 2019-10-02 15:10:00
    VUE-日期选择器,返回的时间为UTC格式:Thu Oct 03 2019 00:00:00 GMT+0800 (中国标准时间),我们需要将UTC时间格式转换成我们需要的格式,例如:2019-09-30 05:12:30 ,或者:2019-09-30 代码展示: <label ...
  • 解决vue项目中时间格式转换 刚开始写的时候是用这种方式转换的 // 时间格式转换 Vue.filter(‘dateFormat’, function (origin) { const newDate = new Date(origin); const n = newDate.getFullYear(); const y = ...
  • vue日期时间转换为年月日格式

    千次阅读 2020-08-19 16:59:58
    } 文本转换 text-indent 指定文本的第一行的缩进 font-family 设置文本的字体 font-size 设置文本的大小 line-height 行高 CSS 链接 - a:link - 正常,未访问过的链接 - a:visited - 用户已访问过的链接 - a:hover -...
  • Vue 时间戳转换日期格式

    千次阅读 2018-08-03 10:28:22
    初学者用了element 的Vue框架,搭建了一个简单后台管理系统,遇到了数据库是时间戳的格式,数据在前端页面显示也是时间戳,开始的时候是在Java代码里将时间戳转换日期格式的,发现这样转换有时候如果数据库里的数据为空...
  • 1、前端获取实时时间 <template> <view class="content"> <view>{{date}}</view> </view> </template> <script> export default { data() { return{ date...
  • 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+': ...
  • C#+Vue时间格式转换

    2021-05-23 12:59:10
    某天甲方给我们提了个要求,如图: 于是我们写成了这样 FCSTDeliverydate = Convert....楞了一会,我还以为是时间格式转换转错了,就把数据重新debug了一遍,结果发现数据库中的数据是数字格式,后台查出来的数据也是数
  • 时间戳转换时间格式 // 时间戳转任意时间格式 调用方法=> this.getDate(1626137166000, 'm-d H:i') this.getDate(1626137166000) 等等 getDate: function (date, format) { date = date || new Date() format =...
  • vue 字符和日期转换工具类,先将util里面的公共对象抛出,全局使用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,243
精华内容 11,297
关键字:

vue时间格式转换

vue 订阅