vue 项目中的时间格式转换和封装和选择限制，开始时间不能大于结束时间，结束时间不能小于开始时间

##vue 项目中的时间格式转换以及封装
#####项目中页面使用 element 的日期组件那么必定使用时间格式转换 new date
第一步：封装时间转换的 js 文件

/**
 * @description: 时间戳转换
 * @param {*} time
 * @param {*} cFormat
 * @return {*}
 */
 export function parseTime(time, cFormat) {
    if (arguments.length === 0 || !time) {
      return null
    }
    const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
      date = time
    } else {
      if ((typeof time === 'string')) {
        if ((/^[0-9]+$/.test(time))) {
          // support "1548221490638"
          time = parseInt(time)
        } else {
          // support safari
          // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
          time = time.replace(new RegExp(/-/gm), '/')
        }
      }
  
      if ((typeof time === 'number') && (time.toString().length === 10)) {
        time = 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(/{([ymdhisa])+}/g, (result, key) => {
      const value = formatObj[key]
      // Note: getDay() returns 0 on Sunday
      if (key === 'a') {
        return ['日', '一', '二', '三', '四', '五', '六'][value]
      }
      return value.toString().padStart(2, '0')
    })
    return time_str
  }

页面引入方式

// 时间格式转换
import { parseTime } from "@/filters/index.js";

使用方法
template

<template>
	<div>
		<el-date-picker
              v-model="form2.beginTime"
              type="date"
              placeholder="请选择日期"
              style="width: 150px"
              :value-format="valueFormat"
              :picker-options="pickerOptionsStart2"
            >
            </el-date-picker>
            <span> ~ </span>
            <el-date-picker
              v-model="form2.endTime"
              type="date"
              placeholder="请选择日期"
              style="width: 150px; margin-right: 10px"
              :value-format="valueFormat"
              :picker-options="pickerOptionsEnd2"
            >
            </el-date-picker>
            <el-button
              style="margin-left: 10px"
              type="success"
              @click="loadEnergyUseSearch"
              icon="el-icon-search"
              >查询</el-button
            >
            <el-button
              type="warning"
              icon="el-icon-refresh-right"
              @click="resetTimeSelector"
              >重置</el-button
            >
            <el-button type="primary" plain icon="el-icon-download" @click="export3Line" >导出</el-button>
          </div>
	</div>
</template>

data（）{
	return {
		// 搜索条件
      form2: {
        beginTime: parseTime(new Date().getTime() - 9*24*3600*1000).substring(0, 10), //开始时间，.getTime() - 9*24*3600*1000  代表当天往前数10天
        endTime: parseTime(new Date()).substring(0, 10), //结束时间，当天
        dateType: "day", //时间维度
      },
      // 时间格式
      valueFormat: "yyyy-MM-dd",
      // 开始结束日期限制
      pickerOptionsStart2: {
        disabledDate: (time) => {
          if (this.form2.endTime) {
            return (
              time.getTime() >= new Date(this.form2.endTime).getTime()
            );
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd2: {
        disabledDate: (time) => {
          if (this.form2.beginTime ) {
            return (
              time.getTime() <= new Date(this.form2.beginTime).getTime()
            );
          }
        }
      },
	}
}