5 ms·

A Better Javascript Date Picker/Calendar

178 points by switz 15y ago

ck2 15y ago
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.
- firefoxman1 15y ago
  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/ https://github.com/ded/script.js/
xpose2000 15y ago
Well done! I would definitely use this on a small project where I only needed a calendar and not the entire jQuery UI library.
ricardobeat 15y ago
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.
- sic1 15y ago
  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 :)
drivebyacct2 15y ago
Click and drag (Google Calendar does it) would be cool. The click-twice-to-select-range isn't necessarily automatically intuitive.
- firefoxman1 15y ago
  it is nice for a phone/tablet though.
DCoder 15y ago
Looks nice. Any plans to integrate a time picker?
- ChiperSoft 15y ago
  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.
  - Torn 15y ago
    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.
  - DCoder 15y ago
    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 http://imgur.com/87e9g.png , I'd love to see a replacement that just works without any hacking needed :)
10dpd 15y ago
Ok now use it without a mouse/trackpad...
micaeked 15y ago
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 http://jqueryui.com/demos/datepicker/#dropdown-month-year
- ktsmith 15y ago
  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.
rauar 15y ago
No dependencies but uses moment.js ? What about I18N for months, days and date format parsing ?
- Torn 15y ago
  Yeah i18n and locale support is a must if this wants widespread adoption
porker 15y ago
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
troels 15y ago
Very nice. I've been using this one for a project recently: http://www.eyecon.ro/datepicker/ 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-bootstrap.htm http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-...
- omgtehlion 15y ago
  updated version really looks (and works) nice, thank you!
Mitt 15y ago
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.
- wavephorm 15y ago
  Ideally you use a localization framework which manages date formated and your back end just deals with date objects.
unicron 15y ago
It's good but it's hard to skip large spans i.e. years.
dspillett 15y ago
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-accessible-datepicker-widgit-v6 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)
benjoffe 15y ago
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).
duncans 15y ago
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/Calendar/Calendar.aspx http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/... The key thing is the ability to click the month/year headings to zoom out.
- kaeluka 15y ago
  that's really cool, I wasn't aware of the zooming
- mattmanser 15y ago
  Not very discoverable though, I wonder how many people ever found that one out.
  - halo 15y ago
    More than you might think given that it's a clone of the Windows date picker.
- heyjonboy 15y ago
  There's a Bootstrap-ified version here: http://www.eyecon.ro/bootstrap-datepicker/ http://www.eyecon.ro/bootstrap-datepicker/
  - crescentfresh 15y ago
    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.
MrNibbles 15y ago
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 http://hanshillen.github.com/jqtest/#goto_datepicker
gautaml 15y ago
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 https://github.com/glad/glDatePicker :)
- omgtehlion 15y ago
  please remove this annoying animation, and strange effect with mouse cursor on inactive days (for a moment I thought that chrome has crashed)
  - gautaml 15y ago
    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.
camerondaigle 15y ago
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/ http://jquery-minical.heroku.com/
- camerondaigle 15y ago
  (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.)

178 points by switz 15y ago

ck2 15y ago

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.

firefoxman1 15y ago
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/ https://github.com/ded/script.js/

xpose2000 15y ago

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

ricardobeat 15y ago

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.

sic1 15y ago
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 :)

drivebyacct2 15y ago

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

firefoxman1 15y ago
it is nice for a phone/tablet though.

DCoder 15y ago

Looks nice. Any plans to integrate a time picker?

ChiperSoft 15y ago
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.
- Torn 15y ago
  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.
- DCoder 15y ago
  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 http://imgur.com/87e9g.png , I'd love to see a replacement that just works without any hacking needed :)

10dpd 15y ago

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

micaeked 15y ago

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 http://jqueryui.com/demos/datepicker/#dropdown-month-year

ktsmith 15y ago
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.

rauar 15y ago

No dependencies but uses moment.js ? What about I18N for months, days and date format parsing ?

Torn 15y ago
Yeah i18n and locale support is a must if this wants widespread adoption

porker 15y ago

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

troels 15y ago

Very nice. I've been using this one for a project recently: http://www.eyecon.ro/datepicker/ 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-bootstrap.htm http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-...

omgtehlion 15y ago
updated version really looks (and works) nice, thank you!

Mitt 15y ago

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.

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

unicron 15y ago

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

dspillett 15y ago

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-accessible-datepicker-widgit-v6 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)

benjoffe 15y ago

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).

duncans 15y ago

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/Calendar/Calendar.aspx http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/... The key thing is the ability to click the month/year headings to zoom out.

kaeluka 15y ago
that's really cool, I wasn't aware of the zooming
mattmanser 15y ago
Not very discoverable though, I wonder how many people ever found that one out.
- halo 15y ago
  More than you might think given that it's a clone of the Windows date picker.
heyjonboy 15y ago
There's a Bootstrap-ified version here: http://www.eyecon.ro/bootstrap-datepicker/ http://www.eyecon.ro/bootstrap-datepicker/
- crescentfresh 15y ago
  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.

MrNibbles 15y ago

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 http://hanshillen.github.com/jqtest/#goto_datepicker

gautaml 15y ago

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 https://github.com/glad/glDatePicker :)

omgtehlion 15y ago
please remove this annoying animation, and strange effect with mouse cursor on inactive days (for a moment I thought that chrome has crashed)
- gautaml 15y ago
  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.

camerondaigle 15y ago

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/ http://jquery-minical.heroku.com/

camerondaigle 15y ago
(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.)