I am looking for a control or a method such that I can allow the user to enter the working times of a shop for each weekday on a web page.

For instance, the working time for Wednesday is:

  • 06:00 AM to 12:00 AM.
  • 05:00 PM to 01:30 AM.

@dan1111's Follow-Up:

Can there be an arbitrary number of opening times per day?


How often will this data need to be entered?

Only once upon shop registration.

by whom?

System Admins.

  • 5
    More info on the requirements would be helpful. Can there be an arbitrary number of opening times per day? How often will this data need to be entered, and by whom (e.g. does a shop owner do this for own shop only, changing it rarely, or is the user someone managing business listings who has to manage the opening hours for hundreds of shops)? Also, please show any interface you have so far for the page where this will go.
    – user31143
    Jan 27, 2016 at 8:31

4 Answers 4


If you like graphical solutions you may try something like this:

enter image description here

Clicking in the stripe below the edit field helps to select the hours without typing them. User may also click and drag, if they like.

  • I think your solution/suggestion is a little bit overwhelming. There are too many numbers to see at once.
    – Behdad
    Jan 30, 2016 at 8:01
  • @Behdad I agree. Though, it's just a wireframe, a concept. It requires some artwork to become a design.
    – mikryz
    Jan 30, 2016 at 14:58
  • IMO this design would be better off with a single 24-hours timelline.
    – Juan Lanus
    Feb 2, 2016 at 22:32

How about something where admins can click/drag the hours for each day. You could provide extra feedback of the actual hours selected during this action.

open hours


Here is my solution to collect working times:

enter image description here

  • why do you need the extra checkbox? - if you delete all time slots for that day then the shop is closed
    – icc97
    Feb 6, 2016 at 0:39

I think this needs work on making it more obvious on what you should do, but I think this is probably about as efficient as you'll get in terms of clicks. It also should be quicker for the shop keeper to make updates.

It's based on how I envisage a shop keeper might write down his time table:

M,T,W,F: 8:30 - 18
T: 8 - 12, 13 - 20
S: 10 - 16
S: Closed  

So you start with the most common occurrence and then add in more specific cases. You start with all the days in the top box (closed), and a default schedule.

enter image description here

You then set the schedule and click for each of greyed out days that it applies to. And add extra more specific schedules further down.

enter image description here

To the side, you could have an version of what it will look like on your site. See the earlier UX.SE question on ways to display the times.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.