I’m developing/designing an event platform for my club. I’m a little despaired how to integrate a date/time range picker. First of all, there are barely proper components to choose from, and I can only apply a few tricks to make it kind of work, but it is a bit confusing for the user:
start, end date and time are disconnected from each other, but visible.
The user is able to choose a date range, but not a time range.
I’m using flatpickr, but I’m not getting that good results: https://flatpickr.js.org/
so now I looked for alternatives, but there is barely a wholesome datetime rangepicker component out there. There is AirBNB, which spans for 2 months, but no time picker.
This is the new design (without the datepicker yet). Any feedback is welcome!
I kind of dislike to have everything on one page.
I looked into better form design strategies and saw https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
But I am a bit unsure how to properly split the form with so many options
Since users have all inputs in the updating/edit mechanism, I wonder if the edit page should be the exact same, so users can see the same inputs and find it faster
but the creation process could be different. E.g. one page for finding a name (names are unique, users could pick from existing events to copy, if there is a series of events (2016, 2017, 2018) and this would be a one-timer.
Thank you in advance!