[REQ] Improve the date-time block in WP-admin

Hi old and new friends working on this great plugin ?? After first using this plugin for many years and submitting many patches and suggestions that landed in the product itself, I’ve now returned from a few years of hiatus to try if this plugin would be great for a new site. I’d like to make use of the opportunity to provide feedback especially from a first-time or casual user’s perspective; the vast majority who isn’t deep into hacking everything themselves.

My first piece of feedback is the event time selection box at the top right of WP-admin’s Add Event page. I see a few issues with it:

1. The From and To date fields are unnecessarily wide. They’re a bulky 14rem wide (~200px). After selecting a date, it fits well into less than 7rem, 6.5rem to be precise to keep the padding identical on the left and right sides. Both of these fields should be shrunk down in width to 6.5rem.

2. The date fields don’t obey the site’s date format setting. The date shows “05/05/2022” despite the site setting being j.n.Y. The date should be formatted as “5.5.2022” instead.

3. The time fields don’t obey the site’s time format setting. The time shows “12:00 AM” despite the site setting being H:i. The time should be formatted as “00:00″ instead.

4. The time fields are also wider than they should be. They’re 7.4rem wide, leaving far more padding on the right side than on the left, and making them feel bulky. These should only be 6.5rem wide, like the date fields, to keep the left and right paddings identical.

4.Bonus: That’s with the long US time format that has ” AM” or ” PM” suffixed at the end; the European time format is 3 characters shorter. In case you’re very adamant about top-notch user experience, you can e.g. create two different CSS classes for time field width, and then apply the correct class for the element based on site time format. That’d be approx. one extra line of CSS and one extra if on PHP side per element.

5. The timezone field is also very wide. For example when Helsinki is chosen (which is automatically done from site settings – yay), there’s unnecessary extra width for 1,5 more Helsinkis. A solution that would cut excess element size fat while being wide enough for every use case would be a simple JavaScript that shrinks the element down to as many rems as the length of the chosen string.

E.g. Helsinki = 8 characters = width: 8rem;.

This JavaScript one-liner should make the box much more usable.