1.最近做项目用的element-ui组件的 el-date-picker 组件 发现传给后端的时间格式不对 是这个格式:Tue Mar 02 2021 00:00:00 GMT+0800 (中国标准时间) ,而后端需要的是这个格式:2021-3-2 然后我就看我之前用element-ui里面的 value-format="yyyy-MM-dd"这个属性是可以直接转的,但是现在用的是更新后的element-plus文档,发现这个属性在新文档中找不到了,而且使用这个属性也不起效果,所以我只能想其他办法。
<el-form-item label="出生日期:" prop="birthTime">
<el-date-picker
v-model="newComers.birthTime"
type="date"
@change="getBirthTime"
value-format="yyyy-MM-dd"
placeholder="选择日期"/>
</el-form-item>
2. 文档中有这个change属性 ,选中值就会触发这个事件,所以我使用了日期转换格式,附代码:
getBirthTime (val) {
const newDate = val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate();
this.newComers.birthTime = newDate;
console.log(this.newComers.birthTime);
},
3.如果需要时分秒可以用这个完整的转换:
getBirthTime (val) {
const newDate = va.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate() + ' '
+ val.getHours() + ':' + val.getMinutes() + ':' + val.getSeconds();
return newDate;
}
4.如果日期选择框是动态渲染的,可以在最后发给后端的时候处理,我是这样做的:
<div v-for="(item, index) in newComers.company" :key="index">
<h3 class="item-title">公司{{index + 1}}:</h3>
<div class="base-message">
<div class="content-time">
<el-form-item label="起止日期:">
<div class="date-time">
<el-date-picker
v-model="item.companyStartTime"
type="date"
placeholder="起始日期"/>
<span>-</span>
<el-date-picker
v-model="item.companyEndTime"
type="date"
placeholder="结束日期"/>
</div>
</el-form-item>
</div>
</div>
</div>
data数据是这样的
company: [
{
companyStartTime: '',
companyEndTime: '',
}
],
在最后处理
const data = this.newComers
data.company.forEach(item => {
if (item.companyStartTime && item.companyEndTime) {
item.companyStartTime = this.paseTime(item.companyStartTime);
item.companyEndTime = this.paseTime(item.companyEndTime);
}
})