MooTools Datepicker / Calendar

Wednesday, 18 Mar 2009
Although there are many MooTools datepickers out there, none of them truly satisfies my desires. There are some that use Ajax (and as such require additional PHP scripts), there are some that are Javascript only, but are rendered in tables. But even among all those available, there are only few that animate nicely, and allow for user-friendly month- and yearpicking.

So I did what every programmer would: I wrote one myself. It animates, allows 4 levels of navigation (time, days, months and years), comes with 4 standard styles, and is highly configurable. And it's giving you all that at 15 kb. Take a look at my MooTools Datepicker.

There are only 2 features I have not implemented although I originally had them planned: triggering the datepicker from another element, and allowing for manual (textual) input in the input element. Both are - in my opinion - unnecessary. However, if you truly desire one of these (or anything else), just let me know, and I'll see what I can do.

Please leave script specific comments at the Datepicker page.
Posted in: javascript mootools datepicker
Add comment

Comments (3)

16-04-2009, 14:04
Roeland
Nice! Will definitely use whenever needed!
16-04-2009, 17:18
httpwebwitch
one feature I'd like is the ability to bind two datepickers together as a "start" and "end" pair. Then the end calendar won't let me choose anything before the start, and the start won't let me choose anything after the end. Thus we are able to choose a date range, not just a single date.

Taken further, a single calendar could be jimmied to show the start and end of a range in one calendar. Tricky, I know. I've seen at least one other Javascript popup calendar that does that, but it wasn't as nice as yours in many other ways and I've discarded notions of using it.

I like how you employed standard PHP syntax for the date format. Awesome work
16-04-2009, 17:45
Monkey
I understand what you mean.

You could also simply use 2 separate Datepickers, and dynamically update the minDate and maxDate options for both, according to the value picked in the other. This is where the onSelect option is useful.

However, integrating this functionality in the Datepicker would naturally be most user-friendly. I'll consider it!