Vue-ElementUI框架-区间日期控件回显并提交 [时间戳->Date对象]
文章目录页面A页面B需求vue代码页面A页面B页面A页面B需求勾选页面A,点击修改,弹出页面B,日期回显至控件里面vue代码页面A// 打开修改弹框editHandle() {//传递数据var data = this.dataListSelections[0];let time1 = new Date(data.dateFrom);...
·
页面A
页面B
需求
勾选页面A
,点击修改
,弹出页面B
,日期回显至控件
里面
vue代码
页面A
// 打开修改弹框
editHandle() {
//传递数据
var data = this.dataListSelections[0];
let time1 = new Date(data.dateFrom);
let time2 = new Date(data.dateTo);
let timeSelector = [time1,time2];
//关键的一步
data.timeSelector = timeSelector;
this.editData = data;
this.doFlag = "update";
this.addFlag = true;
},
页面B
mounted() {
if(this.flag == 'update') {
this.data = this.entity;
this.data.time = this.entity.timeSelector;
} else {
this.data = {};
//this.data.time = [];
}
},
注意了,虽然能回显,但是如果以该数据结构去提交,数据为时间戳,那么我们要进行转换
所以需要一个方法
//日期格式化
getDateTime(unixtimestamp) {
var unixtimestamp = new Date(unixtimestamp);
var year = 1900 + unixtimestamp.getYear();
var month = "0" + (unixtimestamp.getMonth() + 1);
var date = "0" + unixtimestamp.getDate();
var hour = "0" + unixtimestamp.getHours();
var minute = "0" + unixtimestamp.getMinutes();
var second = "0" + unixtimestamp.getSeconds();
return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) +
" " + hour.substring(hour.length - 2, hour.length) + ":" +
minute.substring(minute.length - 2, minute.length) + ":" +
second.substring(second.length - 2, second.length);
},
接着,看下提交方法的代码怎么写
关键代码
let dateFrom = this.data.time[0];
let dateTo = this.data.time[1];
this.data.dateFrom = new Date(this.getDateTime(dateFrom));
this.data.dateTo = new Date(this.getDateTime(dateTo));
这样,日期就是以对象
来提交,而非以字符串
或时间数字
来提交
更多干货,关注微信公众号
更多推荐
已为社区贡献10条内容
所有评论(0)