关于ant-design的DatePicker时间控件回显error问题

最新推荐文章于 2023-10-27 21:42:52 发布
置顶 最新推荐文章于 2023-10-27 21:42:52 发布
阅读量1.7k 收藏 4
点赞数 1
文章标签： javascript es6 jquery vue.js reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mediven/article/details/115362432
版权
在使用ant-design的DatePicker组件时遇到表单回显问题，当尝试通过setFieldValue填充数据导致白屏报错。原因在于DatePicker仅接受moment对象作为有效输入。解决方案是确保将数据转换为moment格式。
摘要由CSDN通过智能技术生成
这几天写后台的时候发现在表单回显的时候无法回显DatePicker控件，一用setFiledValue塞数据就直接白屏报错，后来查了好多信息才发现原来是DatePicker控件只接受moment对象格式的时间所以如果想要解决这个问题，唯一的方式就是，在接口的数据获取了以后，把时间字符串使用moment.js库转化成moment对象类型的时间格式
import moment from 'moment'
// 省略获取接口数据的过程
const result = await getinfo();
setFieldValue({
   time:
最低0.47元/天 解锁文章
des杜甫
关注
antd form表单数据回显操作
01-22
index页面有一个表格，有一个新增按钮，点击新增按钮或表格编辑弹出表单模块，如果是编辑，会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends React.Component { constructor(props) { super(pr
a-time-picker 时间回显问题 , `value` provides invalidate moment time
LavaStrom
07-09 1921
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
antd的DatePicker日期选择框实现日期的回显与改变
qq_52845451的博客
02-15 5398
antd的DatePicker日期选择框实现日期的回显与改变
Ant Design Vue中DatePicker 日期选择框遇到的回显问题
betterKeKe的博客
04-17 9847
Ant Design Vue中DatePicker 日期选择框遇到的回显问题 使用DatePicker时正常取到选择的时间数据是正常的，但是回显时直接将从后端获取的时间传给该组件，时间能显示但是报错，或者直接不显示。 正常获取时间数据： 这个是使用了validateFields，所以数据直接获取，具体参考官方文档form表单 回显时一开始我是直接赋值，报错 getListById() { seeBusinessDistrict(this.$route.query.i
关于时间（日期）选择器的回显问题
风语的博客
03-03 6492
我在vue项目里用到了ant design vue 的时间选择器组件a-date-picker和a-time-picker组件，因为需要回显，一开始的时候碰到了问题，感觉有点费时间，就先跟后端调接口，回过头来在解决这个问题。 现在进入正题，代码附上。 <a-date-picker :value="moment(windowIndate, 'YYYY-MM-DD')" :defaultVa...
Ant TimePicker 时间选择框 回显问题
weixin_41438668的博客
09-22 603
/this.model.startTime 是回显数据因TimePicker 时间选择框组件回显需要年月日，所以~配合moment使用。
angularjs ui-grid datepicker 日期控件
05-24
10. **版本兼容性**: UI-Grid和AngularJS都有自己的版本迭代，使用时确保它们之间的兼容性，避免因版本不匹配导致的问题。 综上所述，"angularjs ui-grid datepicker"是一个将AngularJS的UI-Grid组件与日期选择器...
基于ant design日期控件使用_仅月份的操作
01-18
import { DatePicker } from ‘antd’; 2、主体部分： export default class PersonInfo extends Component{ constructor() { super(); //设置状态，存储日期 this.state = { workMode: ['month', 'month'], ...
ant-design:react后台管理系统
03-11
蚂蚁设计企业级UI设计语言和基于React的实现。 （ :United_States: ） （ :China: ...:package: 安装npm install antd --save :hammer: 用法import { DatePicker } from 'antd' ;ReactDOM . render ( < DatePicker> ,
jquery UI Datepicker时间控件冲突问题解决
10-20
在Web前端开发中，时间选择控件（datepicker）是常用的界面组件之一，它能够帮助用户更便捷地选择日期。jQuery UI的datepicker是较为流行的一个选择，它具有良好的兼容性和丰富的配置选项。然而，在实际项目中，我们...
jquery UI Datepicker时间控件的使用及问题解决
10-22
$("#ui-datepicker-div").css("font-size", "12px"); // 改变日期控件大小 }); 开始时间： 结束时间： ``` 这里设置了`dateFormat`属性来指定日期格式，`changeMonth`允许用户在下拉菜单中选择月份，`...
【el-date-picker】踩坑记，回显不显示及赋默认值不回显问题
花椒和蕊的博客
10-13 9755
日期组件踩坑记
antdv DatePicker 日期选择框 点击数据没有回显的问题
no pains,no gains
10-27 2145
antdv DatePicker 日期选择组件数据回显问题
ant design vue datepicker 日期返显问题
花满天下的博客
06-09 4363
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 Design of Vue 时间选择框踩坑 && Ant Design of Vue 时间选择器数据回显解决方法
m0_46907690的博客
07-24 3565
表格中使用时间选择器 并使其数据回显 本人在项目开发中使用的框架为 Ant Design of Vue 因为这个组件在实际开发中用的是比较少的（一般都是用日期选择框） 肯定有人遇到和我一样的问题框架的api 不是很熟悉导致数据不能回显 两个重要属性 format 数据回显时的数据格式 :default-value 绑定的数据源 连个参数 第一个为默认时间 第二为默认的数据格式 注意数据源必须放在moment中 这个moment 是需要单独引入的 当然事实上你在实际获取的格式并不是这样 需要在获取取的时候
ant design vue 日期选择框date-picker中英文混显问题解决
拿回忆下酒
03-22 2785
date-picker组件虽然展示中文了，但是月份和星期还是显示英文
antd-design DatePicker组件报错
鱼遇海
09-19 201
解决方案：打开弹框时，给日期通过 dayjs 转换一下即可。model弹框中有DatePicker组件，打开弹框报错。
react+antd日期选中回显
Gunba1的博客
12-06 2348
react+antd时间选择之后回显
antd组件库日期组件日期回显时,date.locale is not a function错误解决办法
最新发布
qq_66107576的博客
10-27 2136
1. 网上的几篇都是 教 用locale={locale}去处理国际化之类的,但我的处理了还是没用,后经查文档知晓。千万不可用 dayjs(obj.entryTime).format("YYYY-MM-DD")去处理。2.日期赋值之前应做以下的处理(我的数据是'2022-02-02'格式的)必须用 dayjs(entryTime, "YYYY-MM-DD")dayjs为dayjs第三库。
ant-design DatePicker组件如何支持选择小时
06-02
Ant Design的DatePicker组件可以选择时间，包括小时、分钟和秒。您可以使用DatePicker组件的showTime属性来启用时间选择器。以下是一个示例： ```jsx import { DatePicker } from 'antd'; import 'antd/dist/antd.css'; function onChange(date, dateString) { console.log(date, dateString); } ReactDOM.render( <DatePicker showTime={{ format: 'HH:mm:ss' }} onChange={onChange} />, mountNode, ); ``` 在上面的示例中，showTime属性设置为一个对象，其中format属性指定了时间的格式。在这种情况下，时间格式设置为小时:分钟:秒。onChange回调函数将返回一个moment对象和一个格式化的日期字符串。 您还可以通过设置showTime属性为一个布尔值来启用默认时间选择器，该选择器将显示小时和分钟，但不显示秒。 ```jsx import { DatePicker } from 'antd'; import 'antd/dist/antd.css'; function onChange(date, dateString) { console.log(date, dateString); } ReactDOM.render( <DatePicker showTime onChange={onChange} />, mountNode, ); ``` 在这个示例中，时间选择器将显示小时和分钟，但不显示秒。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值