精华内容
下载资源
问答
  • 本篇文章主要介绍了vue时间格式化实例代码,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 时间格式

    万次阅读 2017-08-24 15:29:54
    讲述一下vue时间格式化。

    讲述一下vue时间格式化。


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

    // 这个函数 网上  随处可见,我也是应用了别人的。
    export function formatDate(date, fmt) {
       
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 
    展开全文
  • 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>

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

     

    展开全文
  • 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页面如下:

    需要将日期转换为:2020-12-25

    二、实现

    修改vue html部分,应用方法dateFormat

    <el-table-column prop="start_time" label="日期" width="140" :formatter="dateFormat">
              </el-table-column>
    

    增加方法dateFormat

    methods: {
          dateFormat:function(date){
            return moment(date).format("YYYY-MM-DD")
          }
        }
    

    重启vue项目,效果如下:

    注意:不需要安装插件moment,也可以实现。

    展开全文
  • 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 时间格式设置

    <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="办理时间" style="width: 100%"></el-date-picker>
    </el-form-item>

    设置时间格式主要修改 format 和 value-format 就ok

    展开全文
  • VUE过滤器的使用 vue 时间格式

    万次阅读 2018-08-30 10:31:43
    过滤器介绍 ... 过滤器常被用于一些文本格式化 我们可以自定义过滤器,可以实现各种各样的功能。...vue时间格式化 创建Date.js var dateFormat = { padLeftZero: function (str) { return ('00'...
  • Vue 时间格式

    万次阅读 2018-08-09 19:21:05
    methods{// 时间格式化 dateFormat:function(time) { ... /* 在日期格式中,月份是从0开始的,因此要加0 * 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05 * */ var month=...
  • vue日期格式化实例

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

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

    2021-04-23 15:05:17
    // 日期格式化 export function parseTime(time, pattern) { if (arguments.length === 0 || !time) { return null } const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}' let date if (typeof time === '...
  • vue 时间格式转换

    2021-05-31 15:04:53
    <p>HH:mm:ss转换成HH:mm 后端返回的时间是12:00:00,现在只要12:00要怎么转换</p>
  • 小记,VUE时间格式化过滤器 在前端获取数据的时候,经常会有时间格式的转换,在JQ中,我们可以获取到具体的某一个时间戳,再进行转换,然后渲染到页面上。可是在vue中,一般都是循环得到一个列表,时间戳一般是这个...
  • vue 日期格式

    万次阅读 2018-09-04 11:36:25
    转: ... (一)函数封装 (将该函数封装成一个文件,或者加入自己项目的函数库) ...// 这个函数 网上 随处可见,我也是应用了别人的。...export function formatDate...开始时间" :value="startDate | formatDate">  
  • vue时间格式

    2021-03-09 17:45:52
    npm引入 npm install moment --save ... Vue.prototype.$moment = moment 在界面中使用 <el-table-column prop="createTime" label="时间" align="center">{{$moment().format('YYYY-MM-
  • Vue.filter('dateFormat', function (originVal) { //dateFormat为自定义函数名 const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = ...
  • vue 时间格式相互转化 1、转化YYYYMMDDHHMMSS时间格式为YYYY-MM-DD HH:MM:ss export function changeTime(time) { var newtime = '' newtime = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time....
  • vue时间格式化例子

    2021-01-07 09:01:04
    vue格式化时间 解决方法: 1.package.json文件添加依赖: "moment": "^2.14.1", ...//过滤器 日期格式化,将 mongo 的 utc 转为当前时间 Vue.filter('dateFormatter', function (value) { return moment(v...
  • vue时间格式化方法

    2020-10-27 09:59:57
    vue 项目中 使用elementui中的时间选择器时候,我们拿到时间数据不一定是转换后的格式,这时候就需要将时间格式转换后,再向后台传参、请求 直接在methods里定义 dateFormat(time) { let date = new Date(time...
  • Vue日期格式化方法

    2020-12-23 17:07:27
    formatter(row,column){ letdate=newDate(row[column.property]); letY=date.getFullYear()+'-'; letM=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'-'; letD=date.getDate()<...'...
  • 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() + '').pad
  • 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) ...
  • 时间转化为yyyy-mm-dd hh:mm:ss 格式 //格式时间 formatTime (date, type = 1) { if (!(date instanceof Date)) { date = new Date(date) }; const curDate = new Date(); const curYear = curDate....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,331
精华内容 15,332
关键字:

vue时间格式

vue 订阅