花了一个下午才解决,官方组件文档里面是没有处理方案说明的。
项目版本:Ant Design Vue 2.0.2
前端部分代码:
javascript
<template>
<a-modal
:visible="visible"
:width="windowWidth"
:height="800"
:title="title"
:maskClosable="false"
@ok="close"
@cancel="close"
cancelText="关闭">
<a-col :md="6" :sm="8">
<span style="color: red;width: 15px;float: left; margin-top: 5px;">★</span>
<a-form-item label="被查询人出生日期" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
<a-date-picker placeholder="请选择被查询人出生日期查询(必填)" v-model="queryParam.csrq" />
</a-form-item>
</a-col>
</a-modal>
</template>
<script>
import moment from "moment";
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
export default {
data () {
return {
moment,
// 查询条件
queryParam: {csrq:''},
}
},
methods: {
close () {
this.cleandata();
this.visible = false;
}
}
}
}
</script>
前端点击选择日期后,点击提交按钮提交表单时,发现传给后台的日期参数格式有问题,跟前端显示的效果不一致
要么前端传之前处理,要么后端接收后处理。
我参考了https://blog.csdn.net/weixin_52691965/article/details/120769403在前端做处理。
处理后代码如下:
javascript
<a-col :md="6" :sm="8">
<span style="color: red;width: 15px;float: left; margin-top: 5px;">★</span>
<a-form-item label="被查询人出生日期" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
<!-- <a-input placeholder="请输入被查询人出生日期yyyy-mm-dd查询(必填)" v-model="queryParam.csrq"></a-input>-->
<a-date-picker placeholder="请选择被查询人出生日期查询(必填)" v-model:value="birthDate" format="YYYY-MM-DD" @change="shijianobj" />
</a-form-item>
</a-col>
export default {
data(){
return{
moment,
birthDate:'',
// 查询条件
queryParam: {csrq:''},
}
},
methods: {
close () {
this.cleandata();
this.visible = false;
},
shijianobj(e){
this.queryParam.csrq = moment(e._d).format("YYYY-MM-DD");
}
}
}
处理完后传到后端日期格式就是yyyy-MM-dd格式