React-dates: Allow anchorDirection={ANCHOR_CENTER}

[augnustin]

I'm working on a mobile-only web app and I happen to need to center the calendar.

Are there any reason for not making this available? This is even more surprising as the component is said to be mobile-friendly.

I tried to manage this with CSS only but I can't since there are style properties from the component.

I'll get started on a fork, please let me know if you are interested into PR.

Cheers

[ljharb]

This seems like something you could do with a custom react-with-styles theme.

[augnustin]

Is it?

Looking at the code, it seems like there are several issues that makes it impossible to customize with CSS only:

• the caret is a child of the input, not the whole border, hence it is not centered when there is an icon
• the responsivizePickerPosition method also needs to be customized and won't behave expectingly unless another behavior is set.

[majapw]

@augnustin I think it would be reasonable to add ANCHOR_CENTER as an option to the anchorDirection prop. We'd be happy to accept a PR in this vein. :)

A lot of designs that we support for mobile make use of one of the portal-ed datepickers instead which doesn't have this same issue.

[augnustin]

Here's my PR: https://github.com/airbnb/react-dates/pull/1173

Please let me know if it fits your needs.