Designing and developing an event creation platform - what to use for a datetime rangepicker?

[MartinMuzatko]

Hey there!

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!

[ralphm]

Are you using a CMS like WordPress? There will most likely be one or more plugins for any CMS you might be using.

[MartinMuzatko]

I would have hoped to get a more detailed reply :\

Unfortunately not all problems on the world can be solved with a wordpress plugin. And my requirements are specific enough to not resort to this blogging platform that labels itself CMS.

I’m using Strapi - a nodejs based Content Management Framework - for quickly creating backend APIs for complex database schemas. This framework does not help in creating front-ends and I don’t need it to. I’m grown up.

All the front-ends are handcrafted using Vue/Nuxt using components available on npm.
I just need some help with design feedback and what you think which design approach would accomplish a datetime range selector.
I’m happy to implement everything on my own, as long as I have feedback for how it could look like to make it easy for the user.