vue moment library formatted date

Begins

Date and time format front and back end can handle, I would rather recommend to handle the front-end (customized high), Here I will introduce two treatments under way

Back-end processing

django default without treatment passed the front of the date format 2018-08-26T19:53:36.538463, which is often not what we want, in fact, this process is very simple, as long as the serialization class under treatment like below

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__" 

We look at the interface, you can find to date has been the format we want the

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", } ] } 

Front-end processing

http://momentjs.cn/ official website
first look at the untreated date format

 

image

End processing requires installation moment (JavaScript date processing library)

 

npm install moment --save

Assembly is then introduced in the moment of need to format dates, may be introduced globally

<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> 

Use the template in

<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> 

This will be the date format in the down-view processing

 

 

 

Author: Programmer companion
link: https: //www.jianshu.com/p/6be55d12b2b7
Source: Jane books