3

I know that this is a recurring question here. But I still couldn't find a good solution.

I have a web site, that needs time period as input. The period includes dates and hours. But the hours are a quantity, not a day hour (8 hours not 10AM-5PM). There are 1-8 hours a day.

There are no really common cases or ranges. The period can range from several hours in a single day to a month or two (around 60 days max). But, on the bright side, the period can only be selected within the future couple of months. It ranges between half a year and a year in the future.

There can be only full days in the middle. But the first and the last day can still be partial.

Optional :

Also, there are events in the period that can affect the users decision. A usable view of all the events for any period is available. But it's on a different page, because it contains much data. So, I would like to show at least some of the events, maybe even grouped, while the user selects the period. But again, this is optional.

The only solution that I could think of is drop downs for month, day and hour for start and end dates.

A single date picker is not an option, because the period can span two calendar months. Double date picker also doesn't work, because of the hours on both sides. I've tried an optional slider with two thumbs. But it's really quirky, because the range is so fluid. Also, I have no idea how to show the events in the period.

Can anyone suggest any better ideas? Something I've overlooked?

UPDATE(end result) : enter image description here

Improve this question
2
  • I did not quite understand what your actual need is. Is it something like a calendar ? So you will have to input (let's say) meeting or working hours per day for the coming two months?
    – Esin
    Commented Jul 24, 2014 at 12:55
  • The need is an input method, best suitable for this case. You can view it more as a vacation scheduler. So, you're absent for a week, with 5 (absence) hours on the first day and 3 on the last. But in the middle, all days are full. Some people can be absent at the same time. But it might also affect projects. So, it would be nice to be aware of the collisions.
    – Palin Revno
    Commented Jul 24, 2014 at 13:27

2 Answers 2

Reset to default
1

What about something like below that shows a breakdown of included and excluded/event dates after using a date picker and hours dropdown? (NOTE - The 'FEB 2008' heading on the date pickers is not editable within the wireframing tool, so it does not reflect the dates listed in the included and excluded areas.)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
7
  • Thanks Andy. The breakdown is not the focus. It's shown later for confirmation anyway. The question is what's the easiest and intuitive way to pick? The stationary calendars with the time dropdowns is interesting idea. I'll try playing around with it...
    – Palin Revno
    Commented Jul 24, 2014 at 13:38
  • I find the calendars to be useful as the user can see what day of the week they are choosing. I suppose dropdowns could accomplish this as well if the day name was included with the date (i.e. 'Saturday, Feb. 1st'), but a calendar gives much more context.
    – Andy
    Commented Jul 24, 2014 at 13:44
  • Can the breakdown effect the user's date range decisions?
    – Andy
    Commented Jul 24, 2014 at 13:44
  • Mostly it will avoid human mistakes/miscalculations. But it's already in place anyway. The day of the week is also a good point. Also, the year is not really required, as the period can be maximum within the next 12 months.
    – Palin Revno
    Commented Jul 24, 2014 at 13:53
  • Ended up using your proposal while tweaking it a bit. Here's the mockup, if it's helpful to anyone else : jsfiddle.net/RrwmS . We'll run some A/B tests against dropdowns and see what happens. Thanks again.
    – Palin Revno
    Commented Jul 25, 2014 at 12:35
1

I have a few thoughts

  • Select Start and end date + time from date picker dropdown, then display chosen days on an interactive calendar
  • Expandable Calendar (Show 1 month at a time, click bar to open month)
  • Have various checkboxes for common actions (no weekends, no holidays)
  • 'Clicking' a day will deactivate it if it's within the date range.
  • Active days will be colorized, inactive days will be white/gray

(sorry for the colors, I didn't want to take too much time away from work ;) )

Day choosers

Improve this answer

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.