element-ui的el-date-picker组件设置了默认日期和格式化串但提交没有格式化问题解决
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
案发现场:
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>
<el-form-item label="4. 时间段选择">
<span>开始时间:</span>
<el-date-picker
class="c-wp25"
v-model="startTime"
value-format="yyyyMMdd"
type="date"
readonly:true
placeholder="选择日期"
:picker-options="pickerStartOptions"
></el-date-picker>
<span class="c-ml10">结束时间:</span>
<el-date-picker
class="c-wp25"
v-model="endTime"
value-format="yyyyMMdd"
type="date"
placeholder="选择日期"
:picker-options="pickerEndOptions"
></el-date-picker>
</el-form-item>
2、regDateBeg参数设置默认值 regDateBeg: new Date(),
var faiSearchObj = new Vue({
el: '.fai-payRecord-search',
data: {
form: {
regDateBeg: new Date(),//这个日期参数
...(其他无关参数,省略)
}
},
methods: {
onSubmit() {
console.log(this.form.payDateBeg);
}
}
});
你会发现,在前端页面显示的日期是 yyyy-MM-dd 的格式
但是,提交表单的时候,payDateBeg的值是Tue May 22 2018 19:30:21 GMT+0800 (中国标准时间)
然后,在手动点选择了控件的日期后再提交表单,这时payDateBeg的值就是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.payDateBeg);
}
}
});
---------------------
作者:markix
来源:CSDN
原文:https://blog.csdn.net/qq_31772441/article/details/80410508
版权声明:本文为博主原创文章,转载请附上博文链接!
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)