Vue3+layout time formatting

1. npm install plugin Day.js

npm install dayjs --save

2. Page introduction

import dayjs from "dayjs";

3. Create method

const dateFliter = (val, format = "YYYY-MM-DD hh:mm:ss") => {
      if (!isNaN(val)) {
        val = parseInt(val);
      }
      return dayjs(val).format(format);
    };

The 24-hour clock and 12-hour clock are written as follows:

 The hours, minutes, and seconds behind yyyy-MM-dd HH:mm:ss are in 24-hour format

The hours, minutes, and seconds behind yyyy-MM-dd hh:mm:ss are in 12-hour format

4. HTML part uses interpolation expression:

Rendering of the time bar in the layout table after getting the data

<template v-if="column.key === 'sys_inserttime'">
    <a>
        { { dateFliter(record.sys_inserttime) }}
    </a>
</template>

 Current time: { { dateFliter(time) }}

5. In vue3, remember to return the method dateFliter at the end.