A Better Javascript Date Picker/Calendar | Hacker News Reader

A Better Javascript Date Picker/Calendar

github.com

178 pointsswitz36 comments

As unfashionable as it may seem, ASP.NET's ill-fated AJAX Toolkit library (before MS realised that jQuery was the way forward) still has the best date picker control: http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/...

The key thing is the ability to click the month/year headings to zoom out.

that's really cool, I wasn't aware of the zooming

Not very discoverable though, I wonder how many people ever found that one out.

More than you might think given that it's a clone of the Windows date picker.

There's a Bootstrap-ified version here: http://www.eyecon.ro/bootstrap-datepicker/

Your comment reads like that is a Bootstap version/"upgrade" of the Ajax Control Toolkit's picker. However it looks to be a completely separate project.

Very nice. I've been using this one for a project recently: http://www.eyecon.ro/datepicker/ and I noticed the other day that the author has begun work on an updated version: http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-...

updated version really looks (and works) nice, thank you!

Opening in response to focus and not accepting focus itself means that it can't be controlled by keyboard (or other not pointer related control device) which could be an issue for disability access.

Admittedly a user forced to use a keyboard could just type in the date so nothing is broken for them other than "interface icing" so it isn't a massive issue, and other than that this looks very nice.

(FYI, I've used http://www.frequency-decoder.com/2011/10/11/unobtrusive-acce... and its predecessor in a couple of projects which is also very nice and is fully non-mouse controllable)

It would be good if he explained somewhere why (from a user perspective) this sucks less than the alternatives.

It seems very little different from what Dynarch's calendar offered in 2007 (the new version is still self-contained): www.dynarch.com/projects/calendar

No dependencies but uses moment.js ?

What about I18N for months, days and date format parsing ?

Yeah i18n and locale support is a must if this wants widespread adoption

While it looks nice, it is completely inaccessible for non-mouse/non-visual users.

I recommend that the developer takes influence from the AEGIS/AOL/TPG accessibility demos - http://hanshillen.github.com/jqtest/#goto_datepicker

Looks nice. Any plans to integrate a time picker?

Author here. I do have a time picker in the works but I was planning to have it be a separate project. I suppose it could be a good idea to bundle it with this to avoid duplicating moment.js.

As soon as I looked at your date picker I said to myself 'shame it doesn't do time'.

Integrating your new time picker into the date one makes sense: Date and Time are inseparable; time adding further precision.

Currently I'm using a heavily hacked third party time picker that was patched onto jquery ui datepicker, and half of the advanced datepicker functions don't work or work badly. It took me a day of research and at least two days of hacking to make this work well: http://imgur.com/87e9g.png , I'd love to see a replacement that just works without any hacking needed :)

This picker seems nice. I'm bookmarking it for any case where a complex datepicker is necessary.

For people looking for keyboard / accessibility support, I personally don't think a datepicker should be attempting to handle those concerns; it's more of a UI polish layer than a primary input method.

On that note, if you're looking for something significantly more lightweight (~8k minified) and easily skinnable, you could check out my own jQuery.minical:

http://jquery-minical.heroku.com/

(To clarify my own statements: I'm not saying there's never a time to use a highly accessible datepicker, just that a very common use case for a datepicker is just to provide a visual way to quickly input a single date into a form control.)

Great that it doesn't have dependencies and no query needed.

But I'd like to see that stylesheet eliminated and loaded only on demand if/when the widget is actually used.

oh that's a good idea for load time. You could always use an async loader like $script.js https://github.com/ded/script.js/

Well done! I would definitely use this on a small project where I only needed a calendar and not the entire jQuery UI library.

I saw the screenshots and demos and immediately disliked it. The default should be that the week starts at Monday. The default String representation should not be `m/dd/yyyy` but instead `dd.mm.yyyy`. There could be additional examples that show the date formats that are used in the usa, but not the first and default ones.

Ideally you use a localization framework which manages date formated and your back end just deals with date objects.

It would be better if clicking in the gaps between day boxes would choose the nearest day box, so that the mouse would not flash between arrow and hand while sliding across it (this is a pretty common UX practice, I think it has a specific name).

only thing i notice missing is the ability to select the month/year from dropdowns... like this: http://jqueryui.com/demos/datepicker/#dropdown-month-year

I agree, if for example you were using this to make date selections far in the past or future there's a LOT of clicking. Unless there's some way to skip years in larger amounts that I just couldn't find in which case there's a discoverability problem.

Really nice. Shouldn't be too hard to also support IE7 as it is, will fork!

Two suggestions: an ok button (don't force users to click out just to close it), open on the upper side when at the end of the page.

I'd be very interested in ie7 support as well. As our contracts still all support ie7 (is there like an eta on ie7s death?).

But hey, if you fork it, post the repo here! Ill help test it :)

Ok now use it without a mouse/trackpad...

Click and drag (Google Calendar does it) would be cool. The click-twice-to-select-range isn't necessarily automatically intuitive.

it is nice for a phone/tablet though.

Definitely like some of the features in this picker.

If anyone's ever looking for a lightweight simple date picker (~4k) you can always check out mine:

https://github.com/glad/glDatePicker

please remove this annoying animation, and strange effect with mouse cursor on inactive days (for a moment I thought that chrome has crashed)

You can actually remove the calls to slideUp(200) and slideDown(200) and replace them with hide() and show() respectively.

As well you can set the -hover class to not alter the looks if you don't want the hover effect.

It's good but it's hard to skip large spans i.e. years.

Reply on news.ycombinator.com