开篇
日期时间格式前端和后端都可以处理,我比较推荐前端来处理(定制化高),下面我就介绍下两种处理的方式
后端处理
django默认不经处理传给前端的日期格式为2018-08-26T19:53:36.538463,这往往不是我们希望的,其实处理这个很简单,只要在序列化类中处理下就好，如下
class WorkOrderSerializer(serializers.ModelSerializer): """ 序列化类 """ # 后端处理时间 apply_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True) complete_time = serializers.DateTimeField(format="%Y-%m-%d %H:%M:%S", read_only=True) class Meta: model = WorkOrder fields = "__all__" 我们来看下接口,可以发现日期已经被格式成我们想要的了
HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS Content-Type: application/json Vary: Accept { "count": 9, "next": null, "previous": null, "results": [ { "id": 11, "apply_time": "2018-09-01 11:03:13", "complete_time": "2018-09-01 11:03:13", } ] } 前端处理
http://momentjs.cn/ 官网
先来看下未处理的日期格式
image
前端处理需要安装下moment(JavaScript 日期处理类库)
npm install moment --save
然后在需要格式化日期的组件中引入moment,也可以全局引入的
<script>
import moment from 'moment' # 导入 export default { name: 'order-list', props: ['value'], methods: { # 编写日期格式化方法 dateFormat: function(row, column) { console.log(row, column) const date = row[column.property] if (date === undefined) { return '' } # 这里的格式根据需求修改 return moment(date).format('YYYY-MM-DD HH:mm:ss') } } } </script> 在template中使用
<template> <div class="workorder-list"> <el-table :data="value" border stripe style="width: 100%"> <el-table-column label="申请时间" prop="apply_time" :formatter="dateFormat" # formatter为固定写法，dateFormat就是刚写的方法 > </el-table-column> <el-table-column label="完成时间" prop="complete_time" :formatter="dateFormat"> </el-table-column> </template> </el-table-column> </el-table> </div> </template> 这样就可以了,在来看下处理后的日期格式
作者：程序员同行者
链接：https://www.jianshu.com/p/6be55d12b2b7
来源：简书