如何清空antd-design框架中时间选择组件 RangePicker 时间选择器的值？

最新推荐文章于 2022-11-22 16:36:27 发布
最新推荐文章于 2022-11-22 16:36:27 发布
阅读量2.2k 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45264424/article/details/108350638
版权

state = {
keyValue: ‘随便’,
};
给他给个 key = {this.state.keyValue}
点击重置 this.setState({keyValue:new Date()}) 就能清空了 相当于重新渲染了一个 ，目的达到

前端老实人灬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+ts+antdesign 清空a-range-picker日期选择框
Cocoljrg的博客
01-08 1545
项目使用vue3+ts+antdesign，在实现一个表单重置的功能，表单中主要有输入框和日期选择框
React中关于antd的RangePicker自定义清空
最新发布
KisJLLLLLL的博客
09-13 786
【代码】React中关于antd的RangePicker自定义清空。
ant design vue日期组件怎么清空（a-range-picker，a-date-picker）
qq_27195727的博客
10-17 2758
a-range-picker <a-range-picker showTime :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD HH:mm:ss" :value="createValue" @change="createChange" /> data() { return { createValue: [], } } 选择时间时： createChange(da
React-antd-RangePicker日期组件清空内容
sunnyjingqi的博客
09-02 4721
做项目中遇到了一个需求，需要清空日历控件，查了api文档，并没有发现好的解决方法。 经查阅一些文档，总结两种方法 1、若使用form表单，可采用清空表单的方式清空日历组件，this.props.form.resetFields(); 2、若是单独写的日历组件，则可以通过设置一个key，然后在点击重置时修改key的值（看了网上一些博客都是这样写的），原理是给rangePicker控件添加key属性，点击重置时，修改key的值，如new Date()，相当于重新渲染控件，达到让控件重置的功能 th
React删除antd的日期选择器的值
weixin_40817168的博客
07-09 946
state = { keyValue:'123' } <DatePickershowTime key={this.state.keyValue} onChange={()=>{}} onOk={this.singleChangeEnd} /> 清空的方法里面 singleChangeEnd（）{ this.setState({ke...
React antd RangePicker日期组件清除时间
m0_71266141的博客
08-10 1755
react antd RangePicker日期选择器咋那么清除时间，灵活运用react机制解决哦～
antd-img-crop:Ant用于Ant Design上传的图像裁剪器
04-28
antd-img-crop 用于Ant设计的图像裁剪器。 English |演示版安装yarn add antd-img-crop用法import ImgCrop from 'antd-img-crop' ;import { Upload } from 'antd' ;const Demo = ( ) => ( < ImgCrop> < Upload> + ...
antd-DatePicker组件获取时间值,及相关设置方式
01-21
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from “moment”; import “moment/locale/zh-cn” format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是...
antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库
05-23
@sishuguojixuefu/antd-mobile-rn 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。通知新版本3.x已经重构完成并发布，安装升级请查看特性基于 Ant Design 移动设计规范。规则化的视觉样式配置，...
antd-visual-editor:ant-design 组件库实时可视化编辑器，实时生成 react 代码
05-24
求 pr特性可视化编辑，同时实时生成结果代码，还可以单独预览丰富的数据编辑能力，可以编辑组件的二维属性组件可嵌套自适应布局除了 antd 的组件，还有一些原生 html 元素可使用原理解析1.如何实现实时编辑第一步，...
ant design vue中日期选择框混合时间选择器的用法说明
01-22
首先时间格式化用到moment方法，需要在页面中引入moment组件 import moment from ‘moment’ 结构代码： <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', { rules: [{ ...
【ant design vue】日期组件数据清空（a-range-picker，a-date-picker）
weixin_55846296的博客
10-12 2353
【ant design vue】日期组件数据清空（a-range-picker，a-date-picker）
vue中a-range-picker清空
bguffci的博客
12-22 1863
Ant Design of Vue中时间选择器清空值
antd RangePicker 清空数据后 异常弹起
qq_38427709的博客
07-26 1087
ant 时间选择器 2.X异常弹起
ant-design DatePicker日期组件清空时间方法
xbz595的博客
11-22 3561
项目中遇到选择时间的功能，相当于这三个选择时间范围的按钮组成了一个单选框，默认只返回其中一个向后台获取数据。
datepicker怎么清空值_清除datetimepicker字段中的值
weixin_36383052的博客
12-24 1626
I'm sure this is simple and it's my understanding of jquery/javascript that is holding me back - but I can't get this to work.All I need to do - is - When a button on the screen is clicked, clear some...
antd（1）-设置RangePicker选择区间和默认选择时间
热门推荐
生如夏花 炫至茶靡
04-16 3万+
安装并引入moment import moment from 'moment' 设置区间和默认选择时间 const dateFormat = 'YYYY-MM-DD' // 默认选择时间为最近7天 const defaultSelectDate = { startDate: moment().startOf('day').subtract(6, 'days'), endDate: momen
react ant 通过置空按钮，在外部通过js清空Select和RangePicker的值
北枫林
10-08 1147
可以给 RangePicker 控件设置一个key，通过将key设置为new Date() 达到清空目的 const [keyValue, setKeyValue] = useState(''); return ( <div> <RangePicker key={keyValue} /> <button onClick={()=>{ setKeyValue(new Date()); }}>重置</button&gt
antd-datepicker组件获取时间值,及相关设置方式
09-05
antd-datepicker是Ant Design中提供的日期选择器组件，可用于选择日期和时间值。获取时间值的方式有以下几种： 1. 使用onChange事件：在DatePicker组件上绑定onChange事件，当用户选择了日期或时间时，会触发该事件并将选择的时间值作为参数传递给回调函数。可以通过e.target.value来获取选择的时间值。 ```jsx <DatePicker onChange={handleDateChange} /> ``` ```jsx const handleDateChange = (value) => { console.log(value); // 可以对选择的时间值进行相关处理 } ``` 2. 使用moment.js库：Ant Design的DatePicker组件默认返回的是Moment.js对象，可以使用该库提供的方法来获取和处理时间值。 ```jsx import moment from 'moment'; <DatePicker onChange={handleDateChange} /> ``` ```jsx const handleDateChange = (value) => { const selectedValue = moment(value).format('YYYY-MM-DD'); console.log(selectedValue); // 可以对选择的时间值进行相关处理 } ``` 相关设置方式包括： 1. 默认时间值：可以通过设置defaultValue属性来指定DatePicker组件的默认时间值。 ```jsx <DatePicker defaultValue={moment('2022-01-01', 'YYYY-MM-DD')} /> ``` 2. 可选时间范围：可以通过设置disabledDate属性来限制可选的时间范围。该属性接收一个函数，根据函数的返回值来控制禁用的日期。 ```jsx <DatePicker disabledDate={disabledDate} /> ``` ```jsx const disabledDate = (current) => { // 返回true表示禁用该日期 return current && current < moment().endOf('day'); } ``` 3. 时间格式：可以通过设置format属性来指定DatePicker组件的时间格式。 ```jsx <DatePicker format="YYYY-MM-DD HH:mm:ss" /> ``` 以上就是antd-datepicker组件获取时间值及相关设置方式的介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值