VUE：日期格式化，将日期

如何将字符串类型的日期（"2020-11-30T02:21:42.000+0000"）进行格式化？

一、VUE格式化为yyyy-MM-dd格式

1、在js中对日期进行格式化

1）、方法：

export function formatDateNew(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  const o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours()
  }
  for (const k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      const str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}

2）、引入方法

import { formatDateNew } from '@/utils'

3）、在方法中使用，注意要先将字符串进行new Date（），否则报错date.getFullYear is not a function

methods: {
    openDialog(data) {
      console.log(data)
      this.dialogFormVisible = true
      this.edit = Object.assign({}, data)
      this.edit.productionDate = formatDateNew(new Date(this.edit.productionDate), 'yyyy-MM-dd')
      this.edit.expireDate = formatDateNew(new Date(this.edit.expireDate), 'yyyy-MM-dd')
      console.log(this.edit)
    },
}

2、使用过滤器格式化日期

1）、函数

export function formatDateNew(date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  const o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours()
  }
  for (const k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      const str = o[k] + ''
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
    }
  }
  return fmt
}

2）、引入

  import { formatDateNew } from '@/utils';

3）、过滤器

filters: {
      formatDate(time) {
        if (time == null || time == "") {
          return "";
        }
        let date = new Date(time);
        return formatDateNew(date, "yyyy-MM-dd");
      }
    },

4）、使用过滤器

<el-table-column label="日期" align="center">
        <template slot-scope="scope">{{ scope.row.exceptionDate | formatDate }}</template>
      </el-table-column>

二、VUE格式化为yyyy-MM-dd hh:mm:ss格式

1、使用过滤器进行格式化

export function parseTime(time, cFormat) {
  if (arguments.length === 0) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if (('' + time).length === 10) time = parseInt(time) * 1000
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

2）、引入

  import { parseTime } from '@/utils';

3）、写过滤器

filters: {
      parseTime(time) {
        return parseTime(time)
      }
    },

4）、使用过滤器

<el-table-column label="除草日期" align="center">
        <template slot-scope="scope">{{ scope.row.weedDate | parseTime }}</template>
      </el-table-column>

三、微信小程序中如何对日期进行格式化？

1、方法

const formatDate = date => {
    const d = date.getFullYear() + '-' + checkTime(date.getMonth() + 1) + '-' + checkTime(date.getDate())
    return d
}

2、引入

const util = require('../../utils/util.js');

3、使用

//发货日期

const sendDate = result.data.sendDate

if (sendDate == null || sendDate == '') {

result.sendDate = ''

} else {

result.data.sendDate = util.formatDate(new Date(sendDate))

}

注意：data.getHours得到的值为8，如果存入数据库，则会多出8个小时。

changeDate1(e) {
        var date =  new Date(e.detail.value);
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const hour = date.getHours()
        const minute = date.getMinutes()
        const second = date.getSeconds()
        const formatNumber = n => {
            n = n.toString()
            return n[1] ? n : '0' + n
        }
        var dateString = [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')

        this.QueryParams.workDate = dateString
        this.setData({
            'material.workDate': e.detail.value
        });
        console.log(this.QueryParams.workDate)
        console.log(hour)

    },

要想解决多出8个小时的问题，修改如下：

changeDate1(e) {
        var date =  new Date(e.detail.value);
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const hour = date.getHours() - 8
        const minute = date.getMinutes()
        const second = date.getSeconds()
        const formatNumber = n => {
            n = n.toString()
            return n[1] ? n : '0' + n
        }
        var dateString = [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')

        this.QueryParams.workDate = dateString
        this.setData({
            'material.workDate': e.detail.value
        });
        console.log(this.QueryParams.workDate)
        console.log(hour)

    },

四、后台如何对返回前端的日期格式化？

在实体类中添加注解@JsonFormat

1、格式化为yyyy-MM-ss HH:mm:ss格式

@Column(name = "create_time")
    @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
    private java.util.Date createTime;

2、格式化为yyyy-MM-ss格式

/**
    * 有效期至
    */
    @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    @Column(name = "QS_VALID_TO")
    private Date qsValidTo;

注意：@JsonFormat注解要加上timezone="GMT+8"，否则保存到数据库时会多8个小时。