React-datepicker: Calendar styling

[pinturic]

It would be nice to have the chance to add a className (or any other way to style) each calendar popup on its own: for example I have a daterange in my project and I want the triangle to be left aligned for the "fromDate" control and right aligned for the "toDate" one

[ekrokowski]

I have the same case. 2 input fields horizontally in one row:

Left input / calendar for the startDate with

popoverAttachment="top left"
popoverTargetAttachment="bottom left"

And a right input / calendar for the endDate with

popoverAttachment="top right"
popoverTargetAttachment="bottom right"

The triangle is on both situations aligned on the left side. There is just missing CSS.

Simple fix would be to add the following CSS:

.react-datepicker__tether-element-attached-right .react-datepicker__triangle{
  left: auto;
  right: 50px;
}

react-datepicker only sets left: 50px; (even on right-aligned).

[ian-moore]

@ekrokowski yes I have the same problem. Would be nice if there was a way to reposition the triangle

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.