antd遇坑系列之<RangePicker/>
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了antd遇坑系列之<RangePicker/>相关的知识,希望对你有一定的参考价值。
参考技术A PS:本人只是一枚废柴小码农,在实战中积累经验,只是将所踩过的坑分享出来给遇到同样坑的小伙伴们提个醒,可能会少走些弯路。如果能帮助到你解决实际问题,我将更加坚定分享的初衷:一起成长。目前只在知乎上和上更新文章,准备在这两个地方持续更新文章,您的关注对我可能是莫大的鼓励。
知乎用户名:废柴码农
微博用户名:有温度的壁纸
哈哈,交个朋友啦~
antd RangePicker/DatePicker 动态满足多个条件禁用
需求:
- 可选今日之前的时间
- 开始和结束时间区间不能超过30天
代码:
dom部分
<RangePicker
allowClear
disabledDate=disabledDate
format='YYYY-MM-DD'
placeholder=[ '起始日期', '结束日期' ]
onCalendarChange=onDateChange
onOpenChange=onOpenChange
/>
js部分
const [ selectDate, setSelectDate ] = useState(null)
// 只能选昨天之前的时间
const disabledDate = (current) =>
// 昨天之前的时间可选择
let bol = current && current > moment().subtract(1, 'days')
if (selectDate)
// 时间区间为30天
const dateRange30 = Math.abs(current.diff(selectDate, 'days')) > 30
return dateRange30 || bol
else
return bol
const onOpenChange = (open) =>
if (open)
setSelectDate(null)
const onDateChange = (date) =>
setSelectDate(date[0])
以上是关于antd遇坑系列之<RangePicker/>的主要内容,如果未能解决你的问题,请参考以下文章
antd RangePicker/DatePicker 动态满足多个条件禁用
antd RangePicker/DatePicker 动态满足多个条件禁用
typescript使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)
typescript使用antd中RangePicker组件实现时间限制 当前时间的前一年(365天)