时间格式的处理，前端的时间显示2020-07-13T16:02:00.000+0000

最新推荐文章于 2022-07-28 15:13:45 发布

潇雷

最新推荐文章于 2022-07-28 15:13:45 发布

阅读量1.2w

点赞数 4

分类专栏： error and debug 文章标签： java

本文链接：https://blog.csdn.net/qq_42184068/article/details/107312554

版权

error and debug 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在后端添加@JsonFormat

@JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")

在这里插public class CdEqInfoVO {
    /**
     * 设备id
     */
    private Long mpntId;
    /**
     * 设备名称
     */
    private String mpntName;

    /**
     *  时间:更改格式
     */
    @JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
    private Date photovolaticTime;入代码片

或
前端js 更改前端样式：

定义一个前端的时间格式处理：亲测有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{date | dateFilter("yyyy/mm/dd hh:mm:ss")}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            date: new Date()
        },
        filters: {
            dateFilter: function (data, format = "") {
                var dt = new Date(data);
                var y = dt.getFullYear();
                var m = (dt.getMonth()+1).toString().padStart(2,"0");
                var d = dt.getDate().toString().padStart(2,"0");
                var h = dt.getHours().toString().padStart(2,"0");
                var mm = dt.getMinutes().toString().padStart(2,"0");
                var s = dt.getSeconds().toString().padStart(2,"0");
                if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
                    format.toLocaleLowerCase() === "") {
                    return `${y}-${m}-${d}`;
                } else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
                    return `${y}/${m}/${d}`;
                } else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
                    return `${y}-${m}-${d} ${h}:${mm}:${s}`;
                } else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
                    return `${y}/${m}/${d} ${h}:${mm}:${s}`;
                } else {
                    return `输入的时间格式有误`;
                }
            }
        }
    });

</script>
</html>

方法三：在vue中页可以引入moment来解决前端时间转换问题：参考：
https://blog.csdn.net/huangge1199/article/details/104630274/

方法四：vue 中添加一个js页面 util.js


export default {
  debug: true,
  init(){
    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;
    }
  },
  // 针对 el-table 使用
  tableDateFormat:function(row,column){
    let date = row[column.property];
    if(date === undefined){
      return ''
    }
    return new Date(date).format("yyyy-MM-dd hh:mm:ss");
  },
  // 针对 el-table 使用
  tableDateFormatTwo:function(row,column){
    let date = row[column.property];
    if(date === undefined){
      return ''
    }
    return new Date(date).format("yyyy-MM-dd");
  },
}

然后在 el-table 中可以这样使用：

     <el-table-column
                                  prop="dateTime"
                                  width="100"
                                  label="日期" :formatter="this.$util.tableDateFormat">
                          </el-table-column>

潇雷

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
时间格式的处理，前端的时间显示2020-07-13T16:02:00.000+0000

在后端添加@JsonFormat@JsonFormat(shape=JsonFormat.Shape.STRING,pattern="yyyy-MM-dd HH:mm:ss",timezone="GMT+8")在这里插public class CdEqInfoVO { /** * 设备id */ private Long mpntId; /** * 设备名称 */ private String mpntName; /**
复制链接

扫一扫

专栏目录