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

这篇具有很好参考价值的文章主要介绍了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>

前端点击选择日期后,点击提交按钮提交表单时,发现传给后台的日期参数格式有问题,跟前端显示的效果不一致
Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题,Ant Design Vue,DatePicker
要么前端传之前处理,要么后端接收后处理。
我参考了https://blog.csdn.net/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格式文章来源地址https://www.toymoban.com/news/detail-672515.html

到了这里,关于Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Elemrnt UI DatePicker日期选择器(格式、限定日期),周选择器

    日期选择器(格式) 日期选择器(限定/禁用日期) 周选择器

    2024年02月06日
    浏览(25)
  • Element UI DatePicker 日期选择器

    该组件选择周的时候,默认显示‘xxxx年第x周’,但在需求要显示为‘xxxx年x月第x周(mm.dd - mm.dd)’或者‘本周(mm.dd - mm.dd)’,最终效果为 首先需要修改v-model默认展示日期,控件中默认展示为周二,设置picker-options,修改为周一, 同时设置不可选本周日以后的时间: 设置显

    2024年02月09日
    浏览(24)
  • jQuery UI 实例 - 日期选择器(Datepicker)

    从弹出框或内联日历选择一个日期。 如需了解更多有关 datepicker 部件的细节,请查看 API 文档 日期选择器部件(Datepicker Widget)。 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上。把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历

    2024年02月12日
    浏览(34)
  • datePicker一个或多个日期组件,如何快捷选择多个日期(时间段)

    elementUI的组件文档中没有详细说明type=\\\"dates\\\"如何快捷选择一个时间段的日期,我们可以通过picker-options参数来设置快捷选择: 通过设置变量pickerOption的值可设置快捷选择: 其中dateFormat方法是将日期格式化,getAllDate方法是获取开始和结束日期之间的全部日期,在data中定义:

    2024年02月13日
    浏览(23)
  • Element UI DatePicker 日期范围选择动态设置禁选日期

    今天在工作时,后端提出了一个DatePicker日期范围组件的一个问题 用图描述大概就是选择开始日期 13 号后,只能选择 13 号前一周和后一周的日期,其他日期处于禁止选择状态。 先去看了下 element 的相关文档,找到了一个 当前时间日期选择器特有的选项picker-options, 传送门

    2024年02月12日
    浏览(23)
  • flutter开发实战-生日等日期选择器DatePicker

    flutter开发实战-生日等日期选择器DatePicker 在开发遇到设置生日等信息需要选择日期,这里用到的是CupertinoDatePicker iOS效果的日期、时间选择器 运行后效果图如下 我们需要调用底部弹窗显示 生日日期选择 ProfileBirthdayPicker flutter开发实战-生日等日期选择器DatePicker。iOS效果风格

    2024年02月16日
    浏览(26)
  • antd的DatePicker日期选择框实现日期的回显与改变

    核心就是让DatePicker的value属性的值变为受控 但是有一个缺点,必须要给一个默认时间(我这里用的当前时间) 代码如下 效果如下

    2024年02月07日
    浏览(29)
  • zdpreact_antdesginpro 继续优化Ant Design开发的后台管理系统

    首先,将项目跑起来: 浏览器访问:http://localhost:8000/user/login 通过上次的优化,我们已经能够使用自己的账号密码进行登录了: 登录后台以后,目前的底部是长这样的: 在源码中的代码是这样的: 这里我决定改为如下内容: 此时,底部就变成了如下样子: 目前项目中需要

    2024年04月10日
    浏览(38)
  • element的datepicker日期选择器选择周一到周日并实现上一周和下一周

    页面初始化效果 点击上一周 点击下一周 1、采用el-date-picker组件,类型使用 week 但是范围是从周日开始,从周一开始需要将 firstDayOfWeek 设置为 1 2、框里还需要展示周一和周日的范围,设置两个新的属性startDate和endDate 根据model属性(默认是星期二),来算出展示的星期一和周

    2024年02月14日
    浏览(26)
  • Element-UI的DatePicker禁用日期选择(type=date/daterange)

    \\\"element-ui\\\": \\\"^2.15.13\\\", 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 选择日,效果:    选择日期范围,效果: 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 选择日,效果:  选择日期范围,效果: 选择日:type=\\\"date\\\" 选择日期范围:type=\\\"daterange\\\" 例如:可选今天、今天前一周

    2024年02月10日
    浏览(29)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包