插件dayjs

官网地址https://dayjs.fenxianglu.cn/
1.安装

> npm install dayjs --save

2.src/libs/data.js

import dayjs from 'dayjs'

// 时间格式化函数
const formatFn = (date, format) => {
  date = dayjs(date)
  if (!date.isValid()) return null
  if (format === 'timestamp') return date.valueOf()
  return date.format(format)
}

// 默认日期格式化方法
export const parseDate = (date, format = 'YYYY-MM-DD') => {
  return formatFn(date, format)
}

// 默认时间格式化方法
export const parseTime = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
  return formatFn(date, format)
}

export default {
  parseDate,
  parseTime,
  dayjs
}

3.用法

3.1用法一全局

main.js

import date from '@/libs/date'
Vue.prototype.$date = date

xxx.vue文件使用this.$date.dayjs(list[0]).format('YYYY-MM-DD 00:00:00')

<template>
  <div>
   <span> {{this.$date.parseTime(data.createTime)}}</span>
  </div>
</template>
<script>
  export default {
    data () {
        return {
            signEndTime: this.$date.parseTime(this.formData.signEndTime, 
            'YYYY-MM-DD 59:59:59'),
            tableColumns: [
                {
                title: '序号',
                width: 60,
                type: 'index'
                },
                {
                title: '时间',
                key: 'createTime',
                render: (h, { row }) =>
                    h('span', this.$date.parseTime(row.createTime))
                }
            ]   
        }
    },
    methods: {
      selectFormDate (list) {
        //在变量参数里使用
        let params = {
            signBeginTime: this.$date.dayjs().format('YYYY-MM-DD'),
            signEndTime: this.$date.dayjs().add(15, 'd').format('
        YYYY-MM-DD'),//加上15天
            startDate: this.$date.dayjs(startDate).startOf('day').format(
        'YYYY-MM-DD'),//开始时间将其设置为一个时间单位的开始
            endDate: this.$date.dayjs(endDate).endOf('day').format(
        'YYYY-MM-DD'),//结束时间
            }
        this.startTime = this.$date.dayjs(list[0]).format('
        YYYY-MM-DD 00:00:00')
        return true
      },
    }
  }
</script>

image.png

3.2直接在xxx.vue文件引入import dayjs from 'dayjs'

<script>
import dayjs from 'dayjs'
data () {
    return {
     //在表单验证规则里使用
      reportColumns: [
        {
          type: 'index',
          title: '序号',
          width: 160
        },
        {
          title: '文件名称',
          key: 'verifySourceFileName'
        },
        {
          title: '报告生成时间',
          key: 'testifyTime',
          render: (h, params) => {
            if (params.row.testifyTime) {
              return h('div', `${dayjs(params.row.testifyTime).
              format('YYYY-MM-DD HH:mm:ss')}`)
            }
          }
        }
      ],
    } 
},
</script>