image.png
背景原因
使用的 element-ui 库中的日期时间选择器，首次进入页面，会给个默认的时间(30天时间段)，这时候，拿到的日期并不是很理想，看以下描述：
<el-date-picker class="invoice-query-item"
v-model="dataVal"
type="datetimerange"
@change="getInvoiceData"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
我们只有触发 change，拿到的日期会进行格式化，跟 value-format 的值绑定的一样。但是首次进来默认选定的日期并没有格式化。
// 首次拿到的日期格式
2019-02-10T11:21:25.346Z
// 触发change 后拿到的日期格式
2019-02-10 19:21:25
解决办法
其实就是格式化日期咯～，直接看代码：
// util.js
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
// App.vue 页面引入这个方法
import { formatDate } from './util'
const invoice_end = new Date();
const invoice_start = new Date();
invoice_start.setTime(invoice_start.getTime() - 3600 * 1000 * 24 * 30);
export default {
data() {
return {
dataVal: [formatDate(invoice_start, "yyyy-MM-dd hh:mm:ss"), formatDate(invoice_end, "yyyy-MM-dd hh:mm:ss")],
}
}
}
