DatetimeFormatter Plugin

This is a plugin for formatting the pure datetime data from the backend like this: '20210518102420' to formatted date or datetime value which is supposed to be displayed on frontend. And also, it can show a formatted datetime range based on two pure datetime data and the format you set.

Three functions are mixined into Vue, one is a vue filter: dateTimeFilter, two are formatter callback functions dateTimeFormatter and dateTimeRangeFormatter, which are based on element-ui table ':formatter' attribute.

Related links: filter(vue) element-ui table

How to use

init

npm i vue-datetime-formatter

// main.js

import DateTimeFormatterPlugin from 'vue-datetime-formatter'
Vue.use(DateTimeFormatterPlugin)

dateTimeFilter

dateTimeFilter(format）

Pass the format template as input attribute and you will get related result.

Example：

// dateTimeResource='20210518102420'

<div>{{dateTimeResource | dateTimeFilter('YYYY/MM/DD')}}</div> // 2021/05/18
<div>{{dateTimeResource | dateTimeFilter('YYYY-MM-DD')}}</div> // 2021-05-18

<div>{{dateTimeResource | dateTimeFilter('YYYY/MM/DD HH:mm')}}</div> // 2021/05/18 10:24
<div>{{dateTimeResource | dateTimeFilter('YYYY/MM/DD HH:mm:ss')}}</div> // 2021/05/18 10:24:20

// dateTimeResource='20210508030505'

<div>{{dateTimeResource | dateTimeFilter('YY/MM/DD HH:mm:ss')}}</div> // 21/05/08 03:05:05
<div>{{dateTimeResource | dateTimeFilter('YY/M/D hh:mm:ss')}}</div> // 21/5/8 03:05:05
<div>{{dateTimeResource | dateTimeFilter('YY/M/D h:m:s')}}</div> // 21/5/8 3:5:5

dateTimeFormatter& dateTimeRangeFormatter

dateTimeFormatter(timeAttr, format)

dateTimeRangeFormatter(startTimeAttr, endTimeAttr, format, [link='~'])

These two formatters are both based on element-ui table's formatter attribute.

For dateTimeFormatter, you can pass the attribute name of the datetime source and format as input to generate the formatted datetime.

For dateTimeRangeFormatter, you can pass the attribute name of the 'start' datetime source and 'end' datetime source, format and the link string (optional, default is '~') you want to link the start and end datetime as input to generate the formatted datetime range.

Example:

/*
table data source:
tableData: [
  { startTime: '202101011324', endTime: '20210102142334' }
]
*/

<el-table :data="tableData" border>
      <el-table-column prop="startTime" :formatter="dateTimeFormatter('startTime', 'YYYY/MM/DD')" label="开始时间"></el-table-column> // 2021/01/01
      <el-table-column prop="endTime" :formatter="dateTimeFormatter('endTime', 'YYYY-MM-DD')" label="结束时间"></el-table-column> // 2021-01-02
      <el-table-column :formatter="dateTimeRangeFormatter('startTime','endTime', 'YYYY/MM/DD hh:mm:ss', ' - ')" label="时间范围"></el-table-column> // 2021/01/01 13:24:00 - 2021/01/02 14:23:34

</el-table>

result:

Format Options

data source: '20210508030505'

format	Example	Describe
YYYY	2021	4 characters year value
YY	21	2 characters year value
M	5	month value
MM	05	2 characters month value
D	8	date value
DD	08	2 characters date value
h	3	hour value
hh	03	2 characters hour value
H	3	hour value
HH	03	2 characters hour value
m	5	minute value
mm	05	2 characters minute value
s	5	second value
ss	05	2 characters second value