##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()
);
}
}
},
}
}