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

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

项目版本: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格式

相关推荐
蜗牛丨9 小时前
Go Vue3 CMS管理后台(前后端分离模式)
mysql·docker·go·vue3·axios·gin·jwt·分页·跨域·ant design vue·log·gorm·otp动态码登录·validator·模型绑定·权限判断
健飞4 个月前
鸿蒙(HarmonyOS)自定义Dialog实现时间选择控件
华为·harmonyos·datepicker·鸿蒙·自定义dialog
一颗不甘坠落的流星8 个月前
【Antd】给 DatePicker 设置快捷时间选项
前端·react·datepicker·antd
a11611054031 年前
ant design DatePicker禁用之前的时间
前端·datepicker·ant design
黑匣子~1 年前
基于element-ui的年份范围选择器
vue·datepicker·element-ui
薛定谔的壳1 年前
Element-Plus DatePicker获取时间戳
datepicker·element-plus·时间戳
BruceGerGer1 年前
flutter开发实战-生日等日期选择器DatePicker
flutter·日期选择器·时间选择器·datepicker