klox7 VIP
Total posts: 914
30 Nov 2013 10:24

Hello,

I'm trying to create Opening hours element in submission form. The idea is to have field with possibility to add multiple time inputs with day names but since I don't know for such a field I'm doing a workaround.

Examples of what I would like to have:

Monday from 10:00-17:00 (or 10am to 5pm or any other format)

Tuesday from 10:00-17:00 etc...

Monday to Friday from 10:00-17:00.

I was thinking of doing it with "Opening hours" field group and then for each time separate text field (one for "from" and one for "to"). So for Monday there will be 2 fields, 1st "Monday from" and 2nd "Monday to". Is there any other way to solved this more elegantly.

Regards

Last Modified: 22 Aug 2014


Sackgesicht VIP
Total posts: 1,636
30 Nov 2013 21:01

Why not use a textarea/html field and simply write the opening hours there?


pepperstreet VIP
Total posts: 3,837
01 Dec 2013 03:32

Idea 1 - basic free fields - 3 Simple Select fields

Day

Pre-define all possible values i.e.:

Monday, Tuesday, Wednesday... Monday to Tuesday, Monday to Wednesday, etc. ...

Or just the very common values, and enable parameter "enter own variant" for exceptions.

Time from and Time to

Pre-define all common values, maybe with half hour steps is enought!?

8:00, 8:30, 9:00, 9:30, 10:00 etc. ...

Repeat this setup for all working days of the week = 15 fields

Cons: - No dynamic switch between 12/24 hour mode. - fields amount

Pros: - unified values and display - simple input for any type of user


pepperstreet VIP
Total posts: 3,837
01 Dec 2013 03:44

Idea 2 - basic free fields - text field for times + input template (script)

Day

see idea 1

Time from and **Time to **

Simple text field with special input template, simplify and control input with misc bootstrap time picker or jquery time picker scripts .i.e.:

Cons: - needs some custom work and custom input template - fields amount

Pros: - intuitive and quick input


Sackgesicht VIP
Total posts: 1,636
01 Dec 2013 04:06

A good summary is here

Since it can get quite complicated (just imagine "break time" like : Monday from 8:00am-11:30am and 1:30pm to 6:00pm"), the most flexible solution would be a textarea, where every user can specify the opening hours as detailed as they like .. even things like "Closed on Sundays"

But then again, all depends on the real case scenario ...


klox7 VIP
Total posts: 914
01 Dec 2013 06:21

Well it's a directory scenario and textarea/html option gives a user (yes, submisions are made by end user) too much control in my opinion. And output isn't unified in that case. Google Places does this quite well. They have option for operating hours from-to, closed checkbox and split times (two sets of hours for a single day).

I like the workaround with simple select but how to determine what end user will need (all days, or from monday-friday,...)? I think there will be just too many fields in this case.

Now I have 14 fields, 2 for every day (from hh:mm and to hh:mm) where I mask the value in field so user knows what to enter (I limit the input lenght to 5). I will control the output in custom template so that labels will be hidden and I will hardcode day names in template.

I like this solution http://jsfiddle.net/vladc77/bq5U6/3/.

Thanks


pepperstreet VIP
Total posts: 3,837
01 Dec 2013 14:01

how to determine what end user will need (all days, or from monday-friday,...)? I think there will be just too many fields in this case.

  • Select fields can also allow custom values (your own variant),
  • Splitting days is a problem. But possible with more fields and custom values.
  • Maybe add all common/possible combinations as pre-defined values. More options, but not more fields! So, why not?! Still easy to read and understand. If Combination is missing, own variant is still possible.

how to determine what end user will need (all days, or from monday-friday,...)? I think there will be just too many fields in this case.

I like this solution http://jsfiddle.net/vladc77/bq5U6/3/.

I agree. Not very "sexy" or too fancy. But it will be easy to understand. If you don´t need complicated exceptions, this is a simple matrix for a "DAU" and most common applications.

Maybe adding an extra field for special opening or exceptions? With proper tooltip or placeholder content.

Idea 3- Custom field with special input logic, multiple values field.

Hence mentioned discussion by "Sackgesicht". It depends on the usecase, search capabilities etc. More features = more difficult application and complex entry form. Some people need a simple fixed table layout, others might need a full-calendar display with flexible timespans etc. - jQuery calendar script - jQuery table/matrix plugin

Idea 3b - Calendar pack - week view

Just a quick and dirty idea ;-) what about Cobalt Calendar pack? Restrict to a certain timeframe (current date is not necessary, only the week layout and display will be used). Let user submit "opening hours" to this particular week. Not sure how easy it is to restrict the date input. Date formating and time input is there, but how to get rid of the unwanted month/year selection... maybe worth a try.


klox7 VIP
Total posts: 914
02 Dec 2013 04:01

Will definetely look into all possibilities, maybe try to create own field if I have extra time:). But thanks for heads up on Calendar pack. New idea just came up:). Can calendar pack be included in existing section and type?


techutopia
Total posts: 202
20 Aug 2014 13:56

Hi all,

There's some excellent ideas above, thanks for your time ... I'm wondering if anyone did actually find and progress to implemention of an acceptable/good solution in the end?

Ta.

Dale.


klox7 VIP
Total posts: 914
20 Aug 2014 15:05

You can try my range field Click here to link...

But you must assign values yourself. But you can do from-to. You can download and maybe play a litle bit with jquery to add time input.


techutopia
Total posts: 202
22 Aug 2014 03:32

Thanks klox7, I'll give it a go and if you'd like some feedback I'm more than happy to let you know. Ta. Dale.

Powered by Cobalt