antdv DatePicker 日期选择框 点击数据没有回显的问题

最新推荐文章于 2023-09-22 11:20:59 发布
最新推荐文章于 2023-09-22 11:20:59 发布
阅读量1.8k 收藏
点赞数
分类专栏： 日常问题总结 文章标签： vue.js 前端 anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua222/article/details/127548539
版权

基于组件的日期选择框做了些业务需求上的调整，然后问题就出现了…在做表单详情数据初始化之后，再次选择日期，显示日期的数据框没有随之改变。

在这里插入图片描述
导致这个问题出现的原因是： 在数据初始化的时候，直接把详情的data对象赋值到了form对象上，即:
在这里插入图片描述
解决办法： 使用Object.assign 给form对象赋值或者JSON.parse(JSON.stringify(data)) / cloneDeep等深拷贝的方式。
在这里插入图片描述

Endless Daydream233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ant design vue datepicker日期选择器中文化操作
01-18
按照ant design vue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言： // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); 完成此步骤后，日期只有部分是中文的，并且年月顺序错误，查找了很多资料才发现，ant design
a-time-picker 时间回显问题 , `value` provides invalidate moment time
LavaStrom
07-09 1728
a-time-picker 时间回显问题 Warning: [antdv: DatePicker] value provides invalidate moment time. If you want to set empty value, use null instead. ant design vue中 时间选择器，需要使用到moment 安装moment 组件 引入moment 组件 回显的时候进行moment处理 （一）安装moment 组件 ```html npm install
Ant Design Vue中DatePicker 日期选择框遇到的回显问题
betterKeKe的博客
04-17 8969
Ant Design Vue中DatePicker 日期选择框遇到的回显问题 使用DatePicker时正常取到选择的时间数据是正常的，但是回显时直接将从后端获取的时间传给该组件，时间能显示但是报错，或者直接不显示。 正常获取时间数据： 这个是使用了validateFields，所以数据直接获取，具体参考官方文档form表单 回显时一开始我是直接赋值，报错 getListById() { seeBusinessDistrict(this.$route.query.i
jquery datepicker日期选择插件鼠标点击text
11-10
jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text
Ant Design中DatePicker设置mode="year"无法获取value
东黧的博客
12-27 1385
问题描述 <DatePicker placeholder="请选择年份" mode="year" onChange={this.onChange} /> 使用上边代码，界面呈现出只有年份的选择器。但是，不管你怎么点击按钮选择年份都不会起作用， onChange 事件根本不会触发，所以value获取不了！ 解决办法 查看文档： 1、onOpenChange 方法，是这样描述...
【Ant Design已解决】a-date-picker已经选择值，但是不显示
爱喝星冰乐的博客
08-28 555
a-data-picker
AntdesignVue 时间设置为年份不回显问题解决
朝花夕拾的博客
08-01 378
moment格式化后是string类型，后台返回的是Number类型导致的，统一格式就会显示了。时间设置为年份回显时报如下错误。年份设置值后报value异常。
DateTimePicker 日期时间选择器 选中日期后不回显问题
qq_38401285的博客
06-28 4275
最近使用element-ui中的日期选择组件，发现选中日期却没有回显出来，但是提交到后台的日期数据却是正确的，即数据变了，视图没变。 经过反复查找，终于发现问题出在给实例对象增加新属性时，直接通过 ‘=’形式赋值是不会触发视图更新的，应该使用Vue.set给实例对象添加新属性。 例如： this.modeForm.validDate = [ response.startDate, response.endDate] this.modeForm是已经创建的实例对象，通过= 创建新属性，不会触发视图更新
ant design vue datepicker 日期返显问题
花满天下的博客
06-09 4203
ant design vue开发做记录 这样直接设置值 会报 var birthday = '1949-10-01' this.form.setFieldsValue({ 'birth': birthday }) value.locale is not a function 原因是datepicker需要指定格式 需要引入moment插件 <script> import moment from "moment" this
Ant TimePicker 时间选择框 回显问题
最新发布
weixin_41438668的博客
09-22 433
/this.model.startTime 是回显数据因TimePicker 时间选择框组件回显需要年月日，所以~配合moment使用。
datepicker日期选择_日期选择_carefully7en_datepicker_
10-03
使用bootstrap的datepicker插件，可以轻松实现表单日期时间选择。
jQuery插件datepicker 日期连续选择
10-24
主要介绍了jQuery插件datepicker 日期连续选择的方法和示例，有需要的小伙伴可以参考下。
基于angular.js的WUI-DatePicker日期选择器插件
06-11
一款功能强大基于angular.js的WUI-DatePicker日期选择器插件、时间选择器插件，支持选择年月日,选择年月,选择年月日,时分,选择年月日,时分秒,选择至今等功能。
echarts 饼状图 （数据为0或很小的扇形显示问题、扇形间隔）
no pains,no gains
06-10 6666
series: [ { name: '概况', type: 'pie', label:{ formatter: '{b}({d}%)', color:'#555555' }, radius: ['30%', '50%'],//小圆和大圆的半径 center: ['50%', '40%'],//.
移动端页面有滚动条但是无法滚动的问题
no pains,no gains
05-22 6592
做移动开发的是，有个签名的功能页面。只要点进过这个页面，再点击其他原先可以滚动的页面，都再不能滚动。 网上查找的问题根本是使用了下面这个js事件： document.addEventListener( "touchmove", function(event) { event.preventDefault(); }, { passive: false } ); 其中e.preventDefault();会阻
echarts 设置堆叠区域图的area颜色
no pains,no gains
06-23 6474
echarts 柱状图数值为0时 显示柱体
no pains,no gains
06-30 6144
解决办法：使用 barMinHeight 设置最小柱体高度 series: [ { name: '成交通证', type: 'bar', barMinHeight: 2, data: this.busiSeriesData } ... ]
vue 所有生命周期函数都执行了两遍的问题
no pains,no gains
06-16 5697
在原有项目新增功能需求模块开发的过程中，发现无论哪一个模板中的created函数都被执行了两次，遂非常熟练的打开了百度… 网络上的解决办法有： 解决方案1：检查main.js 中是否重复声明vue实例 （没有, pass） 解决方案2：据说使用了mixin的会调用两次 （尝试用一个干净的vue项目，使用一个简单的mixin文件，发现并没有执行两遍，把本项目的app文件其他内容全都注释，只留纯净的初始版本，发现也会调用两次。pass） 解决方案3：说什么路由配置问题（直接注掉路由的引用，还是调用了两遍，.
element ui --input输入框不能输入的问题
no pains,no gains
06-20 4493
<el-input v-model="putNumber" autocomplete="off" @input="changeInput"></el-input> 如图所示，无论怎么操作都只显示默认的数值，不能输入。 网上查资料后找到的解决办法是给一个input事件 <el-input v-model="putNumber" autocomplete="off" @input="changeInput"></el-input> //强制更新 chang
react实现DatePicker日期选择框清空
06-08
在React中使用DatePicker日期选择框时，可以通过以下方式实现清空功能： 1. 使用受控组件 在React中，可以通过使用受控组件的方式来实现对表单元素的控制。对于DatePicker日期选择框，可以将其值绑定到组件的状态state中，然后在清空按钮的点击事件中将state重置为null或默认值。 示例代码： ``` import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; function App() { const [startDate, setStartDate] = useState(null); const handleClear = () => { setStartDate(null); }; return ( <> <DatePicker selected={startDate} onChange={date => setStartDate(date)} /> <button onClick={handleClear}>清空</button> </> ); } export default App; ``` 2. 使用非受控组件 使用非受控组件的方式可以更加简单地实现DatePicker日期选择框的清空功能。在非受控组件中，可以直接通过ref获取DatePicker组件的实例，然后在清空按钮的点击事件中调用其clear方法清空日期。 示例代码： ``` import React, { useRef } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; function App() { const datePickerRef = useRef(null); const handleClear = () => { datePickerRef.current.clear(); }; return ( <> <DatePicker ref={datePickerRef} /> <button onClick={handleClear}>清空</button> </> ); } export default App; ``` 以上是两种实现DatePicker日期选择框清空功能的方法，可以根据实际需要选择适合自己的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值