CalendarPicker: a new concept for date selection.

http://roberto.open-lab.com/2010/04/06/ultra-light-jquery-calendar/

by robicch • 16 years ago

41 28 16 years ago

Pair that with the jQuery timepickr: http://haineault.com/media/jquery/ui-timepickr/page/

It's not bad with the year and the month view. I would have the year slide left and right, not just switch because that makes it look like nothing happened at first.

The actual date picker is a bit awkward since it's not a traditional calendar. It's a lot easier to figure out whether the 7th of the month is a Tuesday or a Wednesday by seeing which column it's in rather than what is written underneath it. That way you would have a much cleaner view as well.

robicch5• 16 years ago

This was my initial inspirator: read the history http://roberto.open-lab.com/2010/03/23/so-hard-to-have-a-dat...

JeffJenkins• 16 years ago

I like the idea of letting you jump through multiple months at once, but I think it should show all of the days in the month. If you aren't looking for something in the span initially shown, you're probably looking for something just beyond that. If you start changing the month around it could be anywhere that you want and extra clicks are added to find the right day to select.

robicch5• 16 years ago

Interesting point of view. I'll try to see how it react. Thanks

jister• 16 years ago

>> the next/prev buttons are no fashionable: now you can hide them!

So how will the user know that they must use the mouse wheel to navigate pre/next year or months? For me, it's not good usability-wise.

alkasimi• 16 years ago

You probably right, but "can" is not "must" :-)

Torn• 16 years ago

Agreed, it wasn't immediately obvious how to scroll the non-buttoned version.

stcredzero• 16 years ago

If it's responding to sideways scroll, then multitouch users may discover that by themselves.

Update: no, it seems to be buggy in Safari and scrolling is soaked up by the browser, so I can't two finger scroll on the calendar.

goodness• 16 years ago

Also, I use a laptop with no scroll wheel. There are ways to do scrolling, like clicking both buttons, but it doesn't seem to send all the scroll wheel events. So I can't even find a way to get that version of the calendar to work.

An alternative to both might be to use a linear fisheye. It would just need a selection for 31 days at the bottom, 12 months in the middle, and a few years at the top. The thing that you would probably need to change for the fisheye is not scrolling between months from the day row or years from the months row. In some ways, this is a bit more intuitive anyway.

mavroprovato• 16 years ago

It's nice, but it really needs keyboard navigation...

Adamsammy• 16 years ago

I want it!

danfitch• 16 years ago

It is really missing Monday - Friday. Otherwise I like the idea.

est2• 16 years ago

Who else think the wheel direction is inverted?

robicch5• 16 years ago

:-) LOL..... I made a poll before doing it....

est2• 16 years ago

Hmm, when I first saw the calendar, I think oh cool, there is only one week to choose, the week above and below must be hidden, so it's nature way to navigate to previous week is to scroll up, and scroll down to see the next week.

Although it's not scroll by week but by day, but you get the idea.

nollidge• 16 years ago

How did you do the poll, though? Were they supposed to pick between two live demos, or did you just ask "should scrolling up increase or decrease the value"? In left-to-right languages, I would think most people's intuition is to scroll down to move right and scroll up to move left (with a unidirectional scroll wheel, anyway).

romland• 16 years ago

I have to side with Est, my intuition tells me that it is inverted. I can see why people would want to -say- that up should increase the number, but my initial reaction when landing on the page was that it was inverted.

Make it configurable if it isn't. :)

wmblaettler• 16 years ago

I came here to comment on just that. Wheel-down should increase just as one would scroll down a list on a page that is ordered ascendingly. Of course, I play first person shooters with my mouse y-axis inverted. So maybe I am backwards.

robicch5• 16 years ago

I'll add a config parameter to choose scroll direction...

bhousel• 16 years ago

It probably has something to do with differences in how people think about abstract concepts like time.. Read these, really fascinating stuff actually.

http://news.ycombinator.com/item?id=758822

http://bps-research-digest.blogspot.com/2009/08/surprising-l...

robicch5• 16 years ago

this is a really amazing research!

davidedicillo• 16 years ago

it looks nice, but i don't think it's a good example of UX

webwright• 16 years ago

Interesting experiment, but not a win.

For a new UI to be a success, it needs to be faster for the user to USE or faster for the user to LEARN. The former is more important for tools with repeat users (like a mail app), the latter is more important for sites with transitory users. You could argue that it could perform okay on the former point IF you ignore the meaningful population of people who use trackpads or mobile devices... But how can you possible argue that ignoring that population is a good idea?

tvon2• 16 years ago

On a related note, drop-down date selection has always driven me nuts. Isn't it easier to type "1977" than to find it in a drop-down? Isn't it easier to type "1 <tab> 17 <tab> 1977" than to select each in a drop-down?

Drives me nuts, mostly when clients request the drop-down over the text field...

Qz• 16 years ago

For things like video or website age gates then text entry can be annoying for us heretics who prefer using the mouse to navigate computers rather than keyboard. Any time I have to type something in instead of being able to select with a mouse is a fairly annoying occurrence.

tvon2• 16 years ago

Good point, it makes sense for age verification or any situation where you wouldn't otherwise be using the keyboard.

Though what would really be ideal is a text input with a drop-down... might be a good addition to jQuery UI (or similar).

robbb• 16 years ago

I think this component is not intended for replacing a date input field, but for select a date

jsonscripter• 16 years ago

It needs some easing and transitions to let the user know what's happening.

Maemo has a similar date picker, by the way. It's vertically, and the scrolling is more intuitive partially due to this fact.

CalendarPicker: a new concept for date selection.

Related Stories