MooTools Datepicker v1.13

Thursday, 09 Jul 2009
DatePicker v.1.13 is here! Since v1.12 some minor fixes and improvements have found their way to the DatePicker. Some through GitHub (thanks for that), and some communicated through the comments. This update includes:
  • merge of Johan Nordberg's wrapping timepicker scroll
  • fixed bug with mindate/maxdate
  • fixed month selection switching to wrong month (rarely occured, but still)
This post is a formality which will send a signal to those subscribed through RSS. Head on to my Datepicker page.
Add comment

Comments (5)

08-08-2009, 14:28
Ian Ring
I've tested the new version with the dynamic "maxdate" control.

I have two datepickers, one for "from" and another for "to", defining a range of dates. the dynamic control of min and max is intended to enforce that "from" is always before "to", that the user can't pick a "to" before a "from" and vice-versa.

on the "from", I've added this code to the options:

todatepicker.options.minDate = {date: Math.floor(d.valueOf() / 1000), format: 'U' }

a similar onSelect event was added to the "to" picker to enforce the maxDate of "from".

So far it seems to be working great. I'll continue tweaking and testing.

*** Bug: sometimes the next/prev month arrow disappears when it's not supposed to.

it's August 8 2009 today.
If I select a date from last month (July), then reopen the picker, the "next" arrow is gone and I can't navigate the picker back into August except by clicking on the month name and choosing "Aug".

19-09-2009, 10:44
Hi there!

VERY nice Datepicker - best i've ever seen and i wanted to include it into my (under development) CSS-Frame Layout you can find over at

Two "Bugs" i am fighting with are:

In IE the Datepicker will "hide" all DIVs and display only itself. All Div's reveal again if the datepicker ist closed.

To workaround this strange behaviour, i needed to inject() it inside the DIV where the toggler (input field) is placed.

The 2nd Problem is, that the screen position is calculated absolutely + scrolled offset.

The DIV the datepicker toggler is located in, is scrollable so the screen itself stay where it is but the div with the toggler scrolls. The result is, that the datepicker will not display right below the toggler but somewhere else.

Is there any chance of a workaround or a fix .. like some extra option to setup the target the picker should be injected to:

options: { injectTarget : false }

this.picker = new Element('div', { 'class': this.options.pickerClass }).inject(this.options.injectTarget ? this.options.injectTarget : document.body);

and 2ndly to have an option on how to place the datepicker - if the whole page is scrolled, everything is fine but if a scrollable div is scrolled, the repositioning fails ...

sorry for my english - it's not my mother tongue though.

Keep up the excellent work
25-10-2009, 21:38
Great job and congratulations!

Being a beginner, I found using this datepicker a breeze: it worked instantly, without any problem.

One function which I missed is connecting two datepickers so the second depends on the first one dynamically, but I found explanation here, in the comment of Ian Ring.

Unfortunately, it does not function for me: after adding the script Ian wrote, the first datepicker doesn't close automatically after selection (although the selection seems to function), and the second datepicker min value is not set (or at least it seems so). Am I missing something here?

Best regards,
20-04-2010, 21:14
Stacey Abshire
Looking at using this for a project, but was wondering if it is possible to have it always showing, and not functioning as a popup?

26-06-2012, 14:09

I want to open a calendar instance once page open , currently we have functionality of a blank text box and on click of that calendar is opening , now in my case i want open instance of calendar once page loaded