element-ui的el-date-picker组件设置了默认日期和格式化串但提交没有格式化

####案发现场:
1、el-date-picker日期控件,设置了日期的格式 value-format=“yyyy-MM-dd”

<el-date-picker v-model="form.regDateBeg" type="date" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker>

2、regDateBeg参数设置默认值 regDateBeg: new Date(),

var faiSearchObj = new Vue({
	el: '.fai-payRecord-search',
	data: {
		form: {
			regDateBeg: new Date(),//这个日期参数
			...(其他无关参数,省略)
		}
	},
	methods: {
		onSubmit() {
			console.log(this.form.regDateBeg);  
		}
    }
});

你会发现,在前端页面显示的日期是 yyyy-MM-dd 的格式
但是,提交表单的时候,regDateBeg的值是Tue May 22 2018 19:30:21 GMT+0800 (中国标准时间)
然后,在手动点选择了控件的日期后再提交表单,这时regDateBeg的值就是value-format指定的格式。
这里写图片描述
有点意思


猜想: el-date-picker日期控件默认值是不会经过格式化的,所以设定默认值需要自己先转换格式
####解决办法:自己写个工具类,把默认日期转换成指定的格式,代码如下:

function dateFormatter(str){//默认返回yyyy-MM-dd HH-mm-ss
	var hasTime = arguments[1] != false ? true : false;//可传第二个参数false,返回yyyy-MM-dd
	var d = new Date(str);
	var year = d.getFullYear();
	var month = (d.getMonth()+1)<10 ? '0'+(d.getMonth()+1) : (d.getMonth()+1);
	var day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
	var hour = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
	var minute = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
	var second = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
	if(hasTime){
		return [year, month, day].join('-') + " " + [hour, minute, second].join(':');
	}else{
		return [year, month, day].join('-');
	}
}

再修改 regDateBeg 的默认赋值

var faiSearchObj = new Vue({
	el: '.fai-payRecord-search',
	data: {
		form: {
			regDateBeg: dateFormatter(new Date(), false),//这个日期参数,这里做了修改
			...(其他无关参数,省略)
		}
	},
	methods: {
		onSubmit() {
			console.log(this.form.regDateBeg);  
		}
    }
});

搞定

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值