码迷,mamicode.com
首页 > 其他好文 > 详细

Airbnb react-dates 支持对过去时间的选择

时间:2018-01-30 16:58:17      阅读:799      评论:0      收藏:0      [点我收藏+]

标签:image   iso   需要   范围   png   ima   比较   开始   app   

react项目里的时间组件来自 airbnb 的 react-dates ,但这个组件默认选择范围是从当前时间往后。

即,假设今天是2018年1月30日,在这之前的日期我都无法选择。

下图灰色的部分都是不能选中的。

技术分享图片

 

 查看 storybook 寻找某个能开启选择过去日期的属性

技术分享图片

 

一开始我是懵的,DateRangePickerWrapper 从哪来的怎么 import 的 ?isOutsideRange 属性接受的是一个匿名函数,那我要传什么样的匿名函数给你??

经过试验,我发现,不需要 import 什么 DateRangePickerWrapper 组件,只要这样就能让你的 DateRangePicker 组件支持选择过去的时间。

 

技术分享图片

 

isOutsideRange 属性需要接受一个匿名函数,这个匿名函数有无返回值都没有关系,只要 isOutsideRange 属性被赋值了一个匿名函数,你的日期组件就能支持选择过去日期。
 
我个人倾向于,时间组件是否支持对过去时间的选择,应该由一个属性去控制,这个属性接收的是布尔值。
 
项目里的 QbDatePicker 组件 是对 airbnb 的时间组件进行了一次包装,为了方便使用,我给 QbDatePicker 组件增加了一个 allowPastDays 属性,其默认值是 false。
 
技术分享图片

 

技术分享图片

 

 这样在使用 QbDatePicker 组件的时间就比较方便了,只要加上 allowPastDays 属性就能打开选择过去时间的开关了。

技术分享图片

 

技术分享图片

 

Airbnb react-dates 支持对过去时间的选择

标签:image   iso   需要   范围   png   ima   比较   开始   app   

原文地址:https://www.cnblogs.com/drink/p/8384309.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!