React-dates: Make it more style-agnostic

[augnustin]

This lib has some powerful feature, but it is definitely not agnostic enough in terms of styling.

In the end, the <SingleDatePicker> is a simple <input type="text" />, it shouldn't come with any predefined style, so that if I need to write:

<SingleDatePicker className='input is-large' /> with bulma or <SingleDatePicker className='input-control input-lg' /> with bootstrap, it comes with the expected styling right away.

Yes, there are themes, I can customize my component, but it's definitely harder to write and to maintain that simply having to toggle a single class.

This makes it really look unprofessional for any production project hence I start to find it unfortunately unusable.

[augnustin]

Finally I moved away from this repo in favor of this one: https://github.com/Hacker0x01/react-datepicker

It definitely fits my needs:

• input style agnostic
• is much more sober by default
• uses moment.js with internationalization
• calendar is easily customizable (with CSS/SCSS, no fancy JS)
• has the highlighted dates feature
• can select a range
• ... along with anything I could have found useful here

Thanks the Airbnb team for sharing this, but I have the feeling it is more of your own custom component that you open-sourced, instead of an actually reusable one. My guess is that it got the popularity from the company's popularity more than from the repo's usefulness.

This is quite sad because that's not the point of open-source components.

If one faces the same situation, let's make react-datepicker more powerful instead of hanging on this repo! :smile:

Cheers

[majapw]

Thanks the Airbnb team for sharing this, but I have the feeling it is more of your own custom component that you open-sourced, instead of an actually reusable one.

I'm sad that this has been your experience, as we've worked hard to add a high level of customizability to this library through render props, composability, and theming. This really wasn't an Airbnb-specific component that we happened to open source, and even internally, we use react-dates to great success in a ton of different ways, supporting different products, different brands, different devices, etc.

A lot of the difficulties you've had seem to be in a difference in philosophy (https://brigade.engineering/don-t-pass-css-classes-between-components-e9f7ab192785?gi=b26d566e2550) of styles. I'm glad you've found a datepicker that suits your needs, and good luck in your endeavors.

[k-funk]

I would also love to use this library, but it seems to be incompatible with bootstrap, and its patterns that I have adopted in my projects.

Bootstrap does a decent job of abstracting classes into pieces (multiple classes to achieve a desired result, each one used like a utility: btn btn-success btn-block ....). https://brigade.engineering/don-t-pass-css-classes-between-components-e9f7ab192785?gi=b26d566e2550 doesn't quite account for that pattern that has worked pretty well for me in terms of making complexity manageable and more importantly, reusable between projects (ex: .form-control looks the same in projects A, B, and C) by just including a base stylesheet.