100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

时间:2023-11-12 06:31:52

相关推荐

Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

花了一个下午才解决,官方组件文档里面是没有处理方案说明的。

项目版本:Ant Design Vue 2.0.2

前端部分代码:

<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>

前端点击选择日期后,点击提交按钮提交表单时,发现传给后台的日期参数格式有问题,跟前端显示的效果不一致

要么前端传之前处理,要么后端接收后处理。

我参考了/weixin_52691965/article/details/120769403在前端做处理。

处理后代码如下:

<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格式

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。