时间格式的处理,前端的时间显示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;

    /**
     *  时间:更改格式
     */
    @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
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值