Pick one date/time over multiple days

I have a website that lets the user select a specific time on a specific day, like "2PM on Wednesday July 2, 2019".

I've tried a number of options, but they all seem clumsy.

  • A multi-row single-item <select> for the days, and the same for the time, with the times updated via jQuery as the date changes.

This was functional, but the users seemed to not understand that they needed to change the day to see the available times for that day.

  • The above, only with radio buttons.

This works, but has the same drawbacks, as well as failing accessibility validation for small screens.

  • A jQuery calendar/analog clock combination.

This looked the best so far but confused the hell out of the users because there wasn't a good way to represent unavailable times, and the calendar took up a lot of real-estate since it shows a month and I only allow a 2-week window.

  • A multi-row single-item <select> for the days and times, grouped by day. This is what I'm currently using, and it works but still seem clumsy and is definitely ugly.

FWIW, I only allow the user to pick whole hours, so there's no need for a "minute" hand on any analog clock, and I only allow a max of 14 days from today. They can't pick anything farther out or anything in the past.

Has anybody run into anything with a better UI/UX for letting users pick dates and times?

edit for clarity

These are repair appointments to fix broken appliances (refrigerators, stoves, etc.)

The appointments don't repeat. Once a customer picks a day and time, they wouldn't come back to the site unless some other appliance breaks.

Customers are allowed to select any day and time that the business is open (M-F, 10am-6PM, Sat 11AM-2PM) within the next 2 weeks, but are not allowed to select a time that another customer has already selected.

IE if Bob picked 11AM on Wednesday, Sally would not be allowed to pick 9AM (not open yet) or 11AM (Bob already picked it), but could pick 10AM or any time between 12PM and closing.

follow-up for anybody researching this in the future . . .

This is the current version of the solution:

Terry's Appliance Serve Date Time Picker

This seems to work nicely.

What's not visible is that I also have

  • aria-label tags on the available slots, so people with screen readers can find what they need

  • title tags on the available slots, so people who can see, can confirm what they're about to click.

  • title tags on the non-available slots so people who can see, can tell that the gray squares are unavailable.

User feedback has been good, and it's easy to see a few days at a time. I would have liked to show more days, but ran into an issue with small screen sizes and "minimum clickable area".

Thank you again for all your help.

ugly buttons

Yes, I'm aware that the "earlier" and "later" buttons are ugly. I'm working on them, but wanted to post the update while I was thinking about it.

Terry

Tags: