Prototype based date picker

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.

Download
Download

Demo