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

news2024/11/17 2:27:01

花了一个下午才解决,官方组件文档里面是没有处理方案说明的。
项目版本: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>

前端点击选择日期后,点击提交按钮提交表单时,发现传给后台的日期参数格式有问题,跟前端显示的效果不一致
在这里插入图片描述
要么前端传之前处理,要么后端接收后处理。
我参考了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格式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/929122.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++入门到精通】C++入门 —— 继承(基类、派生类和多态性)

阅读导航 前言一、继承的概念及定义1. 继承的概念2.继承的定义⭕定义格式⭕继承关系和访问限定符⭕继承基类成员访问方式的变化 二、基类和派生类对象赋值转换三、继承中的作用域四、派生类的默认成员函数五、继承与友元六、继承与静态成员七、复杂的菱形继承及菱形虚拟继承⭕单…

数据库为什么使用B+树而不是B树做索引

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

代码随想录训练营二刷第三天 | 203.移除链表元素 707.设计链表 206.反转链表

代码随想录训练营二刷第三天 | 203.移除链表元素 707.设计链表 206.反转链表 一、203.移除链表元素 题目链接&#xff1a;https://leetcode.cn/problems/remove-linked-list-elements/ 思路&#xff1a;使用虚拟头结点&#xff0c;两个指针&#xff0c;一个是遍历指针&#x…

基于微信小程序的餐厅预订系统的设计与实现(论文+源码)_kaic

摘 要 随着消费升级&#xff0c;越来越多的年轻人已经开始不再看重餐饮等行业的服务&#xff0c;而是追求一种轻松自在的用餐、购物环境。因此&#xff0c;无人餐厅、无人便利店、无人超市等一些科技消费场所应势而生。餐饮企业用工荒已成为不争的事实。服务员行业的低保障、低…

算法笔记(二):二分查找

二分查找 1、基础版 public static int binarySearch(int[] a, int target) {int i 0, j a.length - 1;while (i < j) {int m (i j) >>> 1;if (target < a[m]) { // 在左边j m - 1;} else if (a[m] < target) { // 在右边i m 1;} else {return m…

用正则处理Unicode 编码的文本

Unicode&#xff08;中文&#xff1a;万国码、国际码、统一码、单一码&#xff09;是计算机科学领域里的一项业界标准。它对世界上大部分的文字进行了整理、编码。Unicode 使计算机呈现和处理文字变得简单。 现在的 Unicode 字符分为 17 组编排&#xff0c;每组为一个平面&…

前端工程化之规范化

规范化是我们践行前端工程化中重要的一部分。 为什么要有规范化标准 俗话说&#xff0c;无规矩不成方圆&#xff0c;尤其是在开发行业中&#xff0c;更是要有严谨的工作态度&#xff0c;我们都知道大多数软件开发都不是一个人的工作&#xff0c;都是需要多人协同的&#xff0…

C++内存模型

目录 内存模型分类 堆和栈的区别 C中new的工作过程 堆和栈的区别 为什么堆区要比栈区大 内存模型分类 文本段&#xff08;ELF&#xff09;&#xff08;数据区&#xff09;&#xff1a;主要用于存放我们编写的代码&#xff0c;但是不是按照代码文本的形式存放&#xff0c;而…

MySQL的日志undolog、binlog、redolog

1. 日志层次 binlog是Server层&#xff0c;undolog和redolog是innodb引擎层特有的。 2. 记录了什么 & 作用 binlog 记录了所有数据库结构变更和表数据修改的SQL日志。 主要用于数据备份和主从复制&#xff0c;比如误删数据了可以用binlog找回。 undolog 如下图&#…

测试一下阿里通义千问-7B-Chat的性能

测试一下阿里通义千问-7B-Chat的性能 0. 背景1. 实际测试结果(截图) 0. 背景 为了了解一下阿里通义千问-7B-Chat的性能&#xff0c;出了几个问题测试一下。 1. 实际测试结果(截图) 示例代码&#xff0c; import os import openaifrom dotenv import load_dotenv, find_dote…

gma 2 教程(二)数据操作:6.NumPy数组交互

gma 栅格数据集可以通过 ToArray 方法将栅格数据转为NumPy数组&#xff0c;也提供将NumPy数据转换为栅格数据&#xff08;集&#xff09;的方法。 读取NumPy数组到数据集 &#xff08;一&#xff09;函数简介   &#xff08;二&#xff09;示例 保存NumPy数组到文件 &…

基于热交换算法优化的BP神经网络(预测应用) - 附代码

基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.热交换优化BP神经网络2.1 BP神经网络参数设置2.2 热交换算法应用 4.测试结果&#xff1a;5.Matlab代…

leetcode496. 下一个更大元素 I 【单调栈】

【简单题】&#xff08;暴力遍历法很简单&#xff09;但是时间复杂度很高&#xff0c;n的立方级别了。。。 代码&#xff1a; class Solution { public:vector<int> nextGreaterElement(vector<int>& nums1, vector<int>& nums2) {vector<int&g…

Vue2向Vue3过度核心技术computed计算属性

目录 1 computed计算属性1.1 概念1.2 语法1.3 注意1.4.案例1.5.代码准备 2 computed计算属性 VS methods方法2.1 computed计算属性2.2 methods计算属性2.3 计算属性的优势2.4 总结 3 计算属性的完整写法 1 computed计算属性 1.1 概念 基于现有的数据&#xff0c;计算出来的新属…

抓包相关,抓包学习

检查网络流量 - 提琴手经典 (telerik.com) Headers Reference - Fiddler Classic (telerik.com) 以上是fiddler官方文档 F12要勾选保留日志 不勾选的话跳转到新页面之前页面的日志不会在下方显示 会保留所有抓到的包 如果重定向到别的页面 F12抓包可能看不到响应信息,但是…

在Jupyter Notebook中添加Anaconda环境(内核)

在使用前我们先要搞清楚一些事&#xff1a; 我们在安装anaconda的时候它就内置了Jupyter Notebook&#xff0c;这个jupyter初始只有base一个内核&#xff08;显示为Python3&#xff09; 此后其实我们就不需要重复安装完整的jupyter notebook了&#xff0c;只要按需为其添加新的…

Nexus 如何配置匿名用户访问一个仓库

现在有这样一个需求&#xff0c;我们需要匿名用户访问 Nexus 的一个公共仓库。 设置 Roles 在满足这个需求之前&#xff0c;我们需要设置一个 Roles。 Role 的名字是可以随填写的。 这里关键的问题在你需要访问的仓库的 View 的权限需要设置 Read 和 Browse 这 2 个权限。 如…

保姆级使用vmware安装Ubuntu-server版

保姆级VMware安装Ubuntu20服务器版 文章目录 保姆级VMware安装Ubuntu20服务器版前期准备一、安装vmware二、下载Ubuntu镜像 VMware安装Ubuntu201. 启动Workstation Pro或者Workstation Player,进入软件后新建一个虚拟机2. 进入引导界面选择默认的即可3. 点击下一步即可4. 选择操…

【HSPCIE仿真】HSPICE仿真基础

HSPICE概述 1. HSPICE简介3. 标准输入文件4. 标准输出文件3. HSPCIE仿真过程 1. HSPICE简介 SPICE &#xff08;Simulation Program with IC Emphasis&#xff09;是1972 年美国加利福尼亚大学柏克莱分校电机工程和计算机科学系开发 的用于集成电路性能分析的电路模拟程序。 …