antd之RangePicker设置默认值方式
RangePicker设置默认值
今天在项目中有使用到日期选择框,在antd中选择了一个可以选择起始时间和结束时间的日期选择框RangePicker
有个需求是需要将当前时间和当前时间的前一天作为它的默认值,期间遇到了很多bug,在一番修改和csdn后终于修改好了,特此记录一下
首先翻看一下antd中日期选择框的api,它有一个defaultValue的属性,如果是RangePicker的话,他是接受一个数组作为参数,分别作为起始和结束的时间默认值
有点坑的地方在与我刚开始没看懂这里的moment[],是啥意思,它这里需要传入moment对象,也就是你数组里的值必须要是moment对象
所以先要引入moment
运行:
npm install moment --save
在react中引入:
import moment from 'moment' React.Component.prototype.$moment = moment
然后就可以调用moment()将时间字符串转换成moment对象了,moment()方法接受两个参数,第一个是时间字符串如:'2021-01-29',第二个参数是时间格式,需要注意的时,你前面的时间字符串和后面的时间格式需要对应,如moment('2021-01-29','YYYY-MM-DD')或者moment('2021-01-29 18:49:20','YYYY-MM-DD HH:mm:ss')等,看你自己的项目需求了
如果你出现了类似这种的错
那大概率是不符合moment格式的问题了
antd的RangePicker设置七天前,30天前,90天前
记录一下在业务中,用antd的日期组件设置默认选择范围的问题。
Antd的RangePicker设置七天前,30天前,90天前,并且设置默认时分秒为 00:00:00 ~ 23:59:59
<RangePicker ranges={{ 最近一周: [moment().startOf('day').subtract(6, 'd'), moment().endOf('day')], 最近一个月: [moment().startOf('day').subtract(30, 'd'), moment().endOf('day')], 最近三个月: [moment().startOf('day').subtract(90, 'd'), moment().endOf('day')], }} showTime={{ hideDisabledOptions: true, defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')], }} onChange={(data, dataString) => { getDataRange( timeToTimestamp(dataString[0]), timeToTimestamp(dataString[1]), ); }} />
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/qq_42132814/article/details/113404126
相关文章
- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
antd Form组件方法getFieldsValue获取自定义组件的值操作
这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 虽然C#编译器为每个类型都设置了默认类型,但作为面向对象的设计原则,我们还是需要对变量进行正确的初始化。实际上这也是C#推荐的做法...2020-06-25
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了Antd的Table组件嵌套Table以及选择框联动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25
- 这篇文章主要介绍了浅谈vue中$event理解和框架中在包含默认值外传参,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-07
- 这篇文章主要介绍了django前端页面下拉选择框默认值设置方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-10
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
最近在做一个后台管理项目,涉及到react相关知识,项目需求需要在表单中带附件提交,怎么实现这个功能呢?下面小编给大家带来了react使用antd的上传组件实现文件表单一起提交功能,一起看看吧...2021-06-29- 本篇文章是对C++中函数参数取默认值进行了详细的分析介绍,需要的朋友参考下...2020-04-25
- 这篇文章主要介绍了详解对于React结合Antd的Form组件实现登录功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-06
- 在本篇内容里小编给大家整理了一篇关于python函数指定默认值的实例讲解内容,有需要的朋友们可以跟着学习参考下。...2021-03-28
- 这篇文章主要介绍了Go语言设置JSON的默认值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-12-24
- 今天小编就为大家分享一篇关于C++中map和vector作形参时如何给定默认参数?,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧...2020-04-25
- 这篇文章主要介绍了Django model.py表单设置默认值允许为空的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-20
- 这篇文章主要介绍了MySQL 字段默认值该如何设置,帮助大家更好的理解和学习使用MySQL,感兴趣的朋友可以了解下...2021-02-25
springboot配置Jackson返回统一默认值的实现示例
在项目开发中,我们返回的数据或者对象没有的时候一般直接返回的null,那么如何返回统一默认值,感兴趣的可以了解一下...2021-07-29解决Antd中Form表单的onChange事件中执行setFieldsValue不生效
这篇文章主要介绍了解决Antd中Form表单的onChange事件中执行setFieldsValue不生效问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2023-03-14