HN Explorer

Show HN: A simple, customizable, lightweight (3.5KB) date picker for jQuery

9 points by gautaml ↗ HN
Hi All,

I know there are plenty of date pickers out there, and I've tried/looked at quite a few however they were all either bloated or didn't quite have the features I needed for a site I'm working on.

Plus I needed an excuse to learn to write jQuery plugins and learn a few things along the way. :)

Some details and features about the plugin:

- lightweight (3.5KB compressed JS and 1KB compressed CSS)

- forward and back navigation

- current date highlight

- restricting selection of dates outside of a range

- restricting selection of dates beyond N-days from start date

- restricting forward / backwards month navigation

- individual styles per date picker (in case you have multiples on one page)

Downloads, examples, and instructions available at: http://code.gautamlad.com/glDatePicker/

Complete project source available at: https://github.com/glad/glDatePicker/

Appreciate all criticism and suggestion on the code.

Enjoy! :)

6 comments

[ 4.7 ms ] story [ 29.8 ms ] thread
MattBearman
Looks good, I like how simple the default UI is. A couple if issues I found (Google Chrome on Win XP):

- The first time you click the next arrow the datepicker closes and opens again.

- Unselectable dates have the loading (hourglass) mouse pointer, not sure if that's deliberate, it feels wrong.

Overall I think its a great first time jQuery plugin.

gautaml
Matt,

Thanks for the feedback.

The first comment, it was actually a bug that I noticed last night and fixed it. The reason it did that was because I put in a .blur() event on the input and when you try to click the Next/Prev, the focus being lost would cause it to hide. I think it should be fine now after fixing it.

Yes the "wait" cursor was deliberate although it's easily controlled by changing the .gldp-XXX-noday style to not have cursor:wait (where XXX is whatever you name your style)

SHOwnsYou
It sounds awesome - small, customizable datepicker, but nothing shows up for me in chrome for Mac.
gautaml
My page is referencing the JS files for syntaxhighlighter from the site alexgorbatchev.com. Unfortunately that site appears to be down lately so it's disrupting my code.

I've temporarily removed links to it and am referencing the files locally.

My site and the examples should work now. Let me know if it doesn't:

http://code.gautamlad.com/glDatePicker/

gautaml
Version 1.1 is out.

Fixed a major issue with the last date being incorrectly set if it was selected.

Also added an option to set the currently selected date either as a date or an offset from start date. The selected date is also shown in the calendar with a different style.