Displaying Opening Hours
I'm designing a website for a client that has some irregular trading hours. Some days they remain open until 2am, others they close at 10pm.
They want these hours displayed on their landing page, so visitors can see what time they open & close at a glance.
The trouble is I have to work with an API that returns integers only. Based on these integers and the current time, I can display a currently open
or currently closed
flag accordingly. As it stands currently, this isn't possible.
I can't use custom text anywhere, only integers (24 hour time). I'm having some difficulty working out how to display the time.
Currently the client displays their hours like this;
Mon 8am - 2am
Tue 8am - 2am
Wed 8am - 10pm
Thu 8am - 2am
Fri 8am - 10pm
However I don't think this is correct, and looks quite confusing (what is 8am - 2am
?) shouldn't it be;
Mon 8am - 12am & 12am - 2am
Tue 8am - 12am & 12am - 2am
Wed 8am - 10pm
Thu 8am - 12am & 12am - 2am
Fri 8am - 10pm
Admittedly, this also looks quite confusing!
Any ideas how I can achieve this in the most user friendly way possible, without using custom text?