Home > Code Snippets, Javascript > Prototype based date picker

Prototype based date picker

September 21st, 2009 Leave a comment Go to comments

We had started optimizing drive for the projects of Reserway Technologies, and the work being done on the demo site. For the initial prototype, we used a dual datepicker developed in flex, which interacts with the html using javascript calls. We used this because the component was already available, and just adding a couple of handlers could do our job, and we could concentrate more on the abstraction of GDS integration. Well we are in a state where the backend is almost stable and we need more performance drive on the frontend. The first choice was ofcouse linking the libraries to google cdn. Then started cutting the curves. The biggest bottleneck was the whopping 220Kb for the flash control. I was particular to use a simple datepicker, which could be styled using css, and would be better if used the prototype library.

My search for a Prototype based date picker went far and wide, and saw a lot of them with jQuery, animations, effects and some with own implementations, and yet others with prototype, all or most was really complicated or somehow did not serve the purpose. Till I found the clean calendar by Marc Grabanski. The demo onsite was promising, and I proceeded with downloading the kit. Once I read through the code, I was sure that this was the base for me to work with. There was some small kinks, though, and mostly it was because the script did not use any library atall. That is it is on its own, for just a date picker, this would be fine, but since we were heavily onto prototype library, I started to port Marc’s logic to prototype.

Marc had a method popUpCal.setupLinks which was collecting all ‘a’ tags and attaching observers to the same whenever the calendar was redrawn. It is just a matter of preference, and I prefer to reduce the number of observers, so I added an observer to the window.click and tested the target of the event. Thus effectively reducing the observer to a single one as compared to a minimum of 34 in Marc’s implementation. Also I know my code is a bit bigger than Marc’s. The port depends on prototype.js, but has features like active range, and is more familiar to my team for making mods.

Our testers found some bugs while browsing using our dear Internet Explorer, and those are corrected now. The demo has a select box to show that it does not punch through the calendar and create a visual interference. Also my original version had a window observer to track clicks on the whole visible area, which did not work out in IE. So I had to switch to document observer, and calendar element observer.

Prototype based date picker (2137)


  1. October 1st, 2009 at 11:51 | #1

    Hey Jiju, glad you found clean calendar a good base to build on. :)

  2. October 2nd, 2009 at 06:35 | #2

    @Marc Grabanski
    I thank you for providing such a wonderful piece as open, which made me do this

  3. February 5th, 2010 at 22:34 | #3

    Nice script, but it is possible to select date interval?

  4. February 7th, 2010 at 22:40 | #4

    Range selection was not a requirement for the need where we used it originally.

  5. Ruel
    March 6th, 2011 at 09:54 | #5

    How can I access the previous dates to be picked?..please help..

  6. March 6th, 2011 at 19:30 | #6

    @Ruel In calendar.js, line 209 to 214 holds the configuration of the calendar, actually for our implementation, being flight availability search, previous dates should be locked and non selectable, There is one drawback, you will need to supply a minimum date with the Date() constructor. Better provide the minimum date that can be choosable as Jan 1 1970, and the calendar should work.

  7. Clarisse
    March 29th, 2012 at 19:17 | #7

    Hi !
    I’m french and I search to start the week with the Monday and not the Sunday, is it possible ?
    Thank you, the calend

  8. Clarisse
    March 29th, 2012 at 19:17 | #8

    ar is great !

  9. April 23rd, 2012 at 23:04 | #9

    Aaah.. sorry to let you down.. this is a bit too old code to burn my brains.. it was written long back, and depends heavily on very old version of prototype.js

  10. Harikrishnan
    September 13th, 2013 at 18:47 | #10

    Thanks buddy. Really saved me some trouble. Cool code.

  1. No trackbacks yet.

five + two =