开篇
日期时间格式前端和后端都可以处理,我比较推荐前端来处理(定制化高),下面我就介绍下两种处理的方式
后端处理
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",
}
]
}
前端处理
先来看下未处理的日期格式
前端处理需要安装下moment(JavaScript 日期处理类库)
npm install moment --save
然后在需要格式化日期的组件中引入moment,也可以全局引入的
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')
}
}
}
在template中使用
:data="value"
border
stripe
style="width: 100%">
label="申请时间"
prop="apply_time"
:formatter="dateFormat" # formatter为固定写法,dateFormat就是刚写的方法
>
label="完成时间"
prop="complete_time"
:formatter="dateFormat">
这样就可以了,在来看下处理后的日期格式
本篇结束