Fix calendar datepicker location, sizing, and behavior when page is scrolled

[joshfeck]

There are a few UI tweaks needed for the calendar datepickers.

1. It's possible to have both "start" and "end" date selectors open at the same time within the Ticket Editor.
   One possible fix for this issue would be to close the datepicker UI if the user clicks anywhere outside the datepicker box.

2. Depending on the relative position Start/End fields, relative to where the user has scrolled to, the datepicker may be mostly out of view when opened.

and

3. A similar issue happens with the tooltip hints where they're located no where near the inputs:

[garthkoyle]

[tn3rb]

Just a heads up that this may be an issue with the core Gutenberg datepicker component.
Some of the positioning issues with the datepicker as well as tooltips when using those within a Modal window are core issues that they seem reluctant to address, plz see: WordPress/gutenberg#8468

[tn3rb]

Overall the WP datepicker appears to be somewhat buggy imho, so we may want to consider using one or more components from a third party library that work better. This would also allow us to construct separate components that are customized for their specific use cases.

Some examples where different datepickers might work better than expecting one to work in all cases:

• selecting individual dates for an event in the admin
• choosing start and end dates for the Ticket Sales period (typically a longer range than the event dates)
• selecting dates to populate ticket options in the Ticket Selector

[garthkoyle]

I'm not sure how to help with this. Do you want my help with trying to make a decision about how to approach this?

[joshfeck]

@tn3rb There's that other project card about using the AirBNB calendar for setting ticket sale start and end dates, and wouldn't that open from within the Card UI, outside of the modal?

Then, maybe we could use the default WP datepicker component for datetimes, but instead of opening it within the modal, it only opens from the Card UI. So no datepickers/tooltips within a modal.

One further thought on setting a datetime start + end, instead of 2 calendars (one for start and one for end of the datetime) how about have a calendar input for the start, then follow with a duration field? e.g event is 3 hours long so we provide a field to set 3 hours. Of course, some events may go more than one day so we could also provide a field to set an end date, many users may not end up using that last field.

[stale]

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.

[stale]

This issue has been automatically closed because it has been stale for a significant period of time without any activity.