关于moment升级版全局日期格式化

r囧r小猫 2023-06-13 04:55 14阅读 0赞

**1.在src目录下创建个filters文件夹，在里面创建个filters.js**  
老规矩 下载moment

npm install moment

在filters.js中写

//filters.js
    
    import Vue from 'vue'
    import moment from 'moment'
    /*
       全局时间格式化，使用方法   如果需要在script中格式化  this.$root.$options.filters.dataFormat(要格式化的时间,'YYYY-MM-DD')
       在element中:formatter="formatTime"  在script中这么写formatTime(row,column){return this.$formatTime(row[column.property],'YYYY-MM-DD HH:mm:ss')}
       在html中直接 <span>{
       {"要格式的时间"| dataFormat}}</span>
    */
    // 时间格式化
    Vue.filter('dataFormat', function (time, format) {
      if (time) {
        return moment(time).format(format)
      }
    })
    function formatTime (row, column) {
      const date = new Date(row)
      if (!date) {
        return ''
      }
      let filters = this.$root.$options.filters
      return filters.dataFormat(date, column)
    }
    formatTime.install = function (Vue, options) {
      Vue.prototype.$formatTime = formatTime
      Vue.tools = formatTime
    }
    //一定要导出
    export default formatTime

**在main.js下直接引入**

import filters from './cookie/filter'
    Vue.use(filters)

**需要在element中过滤的话 就这么来**  
在script中写个函数

formatTime (row, column) {
           return this.$formatTime(row[column.property],"YYYY-MM-DD")
        },

**在template中调用**

:formatter="formatTime"

**在html中直接这么来**

在html中直接 <span>{
       {"要格式的时间"| dataFormat}}</span>

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringBoot 全局日期格式化（基于注解）

学习目标快速学会通过注解`@JsonComponent`自定义日期格式化的序列化器。快速查阅专题阅读：[《SpringBoot 布道系列》][Sprin...

清疚/ 2024年04月19日 09:28/ 0 赞/ 110 阅读

相关 SpringBoot 全局日期格式化（基于HttpMessageConverter）

还在为日期格式化的问题头痛？赶紧阅览文章寻找答案吧！学习目标快速学会使用Jackson消息转换器并实现日期的全局格式化。快速查阅专题阅读：[《S...

柔光的暖阳◎/ 2024年04月19日 09:22/ 0 赞/ 102 阅读

相关 springboot 全局日期格式化

方式一，配置properties文件配置，只针对于Date类型 jackson相关配置 spring.jackson.date-format = yyyy-M

清疚/ 2023年07月25日 09:39/ 0 赞/ 60 阅读

相关 element-UI date-picker日期控件moment格式化方法

<div> <label class="label-div"> <span>开始时间</span> </label>

╰+哭是因爲堅強的太久メ/ 2023年06月19日 04:20/ 0 赞/ 41 阅读

相关关于moment升级版全局日期格式化

1.在src目录下创建个filters文件夹，在里面创建个filters.js 老规矩下载moment npm install moment 在filters

r囧r小猫/ 2023年06月13日 04:55/ 0 赞/ 15 阅读

相关 Spring Boot 全局统一日期格式化

在application.yml配置文件中加入 spring: jackson: 参数意义： JsonInclude.I

桃扇骨/ 2023年02月14日 15:56/ 0 赞/ 100 阅读

相关 SpringBoot 全局日期格式化（基于注解）

关注微信公众号“java大数据修炼之道”,选择“设为星标” ; 优质文章和精品资源, 第一时间送达 ![图片][9ca803f13b9919f

àì夳堔傛蜴生んèń/ 2022年12月28日 08:30/ 0 赞/ 182 阅读

相关 Springboot全局日期格式化

package com.common.config; import org.springframework.boot.autoconfigure.ja

迈不过友情╰/ 2022年12月08日 12:55/ 0 赞/ 287 阅读

相关 SpringBoot全局日期格式化（基于注解）

/ 全局日期格式化 / @JsonComponent public class DateFormatConfig {

Dear 丶/ 2022年11月12日 02:34/ 0 赞/ 264 阅读

相关 vue中日期格式化Moment.js

1.安装依赖 npm install moment --save 2.main.js中引用 import moment from 'moment'

骑猪看日落/ 2021年08月29日 20:05/ 0 赞/ 581 阅读