React-dates: [Feature Request] Preset date ranges

[ianks]

One thing that is necessary for an app that I am building is preset date ranges. For what I am doing, it is a bad UX to force users to pick specific dates always; oftentimes they want just the data from the last week/month/etc. I understand that for Airbnb this is not a valid use case, but for many other styles of it is. A good mockup for how this might look is from bootstrap-daterange-picker:

Would the maintainers be open to accepting a PR with the feature if it was not part of the default configuration?

[ljharb]

Could you provide some examples of how the "presets picker" would look in all the various configurations? ie, vertical, single month, double month, etc?

[sharq1]

Check out our extension:
https://github.com/streamfoundations/react-dates-presets/

[liubko]

@mikesparr your solution might not work if you have calendar opened and part of the range isn't visible.

I click at quarter range, but only half of dates are highlighted. The problem is that when the dates aren't visible (!isDayVisible(...)), modifiers wouldn't be updated.

https://github.com/airbnb/react-dates/blob/master/src/components/DayPickerSingleDateController.jsx#L442-L444

Would appreciate any help.

[danielone]

Are presets now natively supported ?!

[derwaldgeist]

Need this too, for weeks, months, and years.

[derwaldgeist]

@sharq1 Your extension looks promising, but unfortunately it has no license attached to it.

[sharq1]

@derwaldgeist it's MIT now. Cheers!

[majapw]

This is somewhat addressed in that there is an example of how to do this at http://airbnb.io/react-dates/?react_perf=1&selectedKind=PresetDatePicker&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Factions%2Factions-panel

I don't think we will be shipping anything preset specific because it's already possible to implement it yourself with the API. Now there is better documentation of that. :)