How to design a good one-line date picker?

Question

I'm designing a website on which a user has to pick a date, which is today by default. The content of the site will be based on the chosen date. 90% of the time, the date will be chosen between today and (today+10 days). A past date cannot be chosen.

I want to do a one-line link-based date picker. Here is an idea (half-working live demo):

I'm not sure exactly if it's explicit for the user? Questions:

• what to do when I click on "tuesday 26", to make new dates appear? Should it be like my live demo?

• where to put a link for other date that would open a normal rectangular date picker (that looks like a calendar) allowing the user to choose another future date?

• I think today link should be always visible, so that if the user is lost in the dates, he can always return to today

---

Note: I don't want a big rectangular datepicker to be present all the time:

This should only appear when the user selects other date. 90% of the time the user won't use it, that's why I really think a one-line date picker would be better for my use case.

Answer 1

If 90% of scenario is covered by Today+10 days, then perhaps something like this could work, without having to worry about Next | Previous or losing your current place.

It takes up more space, but it's also less finicky.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Today is indicated as bold. You also need month, because date range could cover current month and next month.

Answer 2

You can tell better but since you mentioned that 90% time the dates will be within next 10 days - I am assuming that the user pretty much starts off with a date in mind, rather than thinking which date to pick. So in essence he/she is clear with the date (which is approaching soon), and just needs to select what is in mind. With that assumption, check the solution attached.

1) Initially today is selected.

2) Next stage shows tomorrow being selected.

3) Lets assume, user has 2nd May in mind (within 10 days), then user could either use the arrow buttons (keyboard as well as in UI), to +/- the date or type in the date in mind.

4) If the user types in say 2 in the date field, the month field should automatically change to May (next month), as its known that it would be most probably choice. (Range being +10 days)

5) This interface allows any date to be input, still allowing the user to use the calendar facility to choose a desired date in future.

The idea is - Since user already will have the date in mind, its easier that you provide him an easier way to input that rather than providing all possible 10 day options at once, which can lead to confusion.

Answer 3

Have you thought about whether there is a preference for weekends / week days in the selection and highlight vs grey out the sections that are less important?

Concept 1

I think just a simple Next / Previous with a hidden calendar that can expand beneath it should work.

As per the comments here's a modified version, showing today:

There is no other more efficient method that I can see. Pretty much any design will take two clicks to get the correct date.

Concept 2

For example you could try this concept with effectively a horizontal accordion. Clicking on a date range wouldn't select a date, it would just expand that section that you could click on an individual date.

I'm not a designer, so I purely took inspiration from this dribbble events page design:

Concept 3

Also note, that similar to the design (which is pure coincidence as it has the remaining days in March), you could just have a neatly stacked double row of 2x5 for the next 10 days and then an expandable calendar below for the rest.

Answer 4

I had a similar design concern a few months ago.

My implementation was a text box displaying the default date formatted as you desire. When the user issues an onclick event a date picker is launched. I used a jQuery datepicker on the backend

In that case your page would not appear excessively bulky.

Let me know if that was helpful.

Answer 5

I just wanted to share here how I improved my original version, it works now. Live demo.

Not optimal yet in terms of UX, I'll update thanks to all your contributions in the different answers and useful remarks.

As pointed by some people, I'll add the months as well. (Any idea of how to do it is JavaScript without hardcoding ['Jan', 'Feb', 'Mar' ...]?)

Answer 6

You can also use Windows Phone Date Picker Format.

To Select Date you have to swipe up or down to change date.

Answer 7

I see a lot of confusion. In my humble opinion what you need is an interval picker and not a single date picker.

I think you must leave the idea of date picker and start to work at the idea of interval picker.

Interval picker it's simple to comunicate than your solution so you can fix a side of the range (today) and on the other side you can propose a date with the picker. For example: Today ------> 25th May