開篇
日期時間格式前端和后端都可以處理,我比較推薦前端來處理(定制化高),下面我就介紹下兩種處理的方式
后端處理
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
來源：簡書