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

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