MooTools DatePicker

Version 1.17
Smoothly animating and very configurable. No Ajax - pure Javascript.
Will work for any date-format and even supports time-picking.
4 skins ready for download, and it's easy to skin it yourself.

(I just tried to create the best javascript datepicker available)
Show me some demo's


You can freely use this work - but some rights are reserved.


There are two downloads available, the original source file and a minified version ready for deployment. Most likely you will just want to use the script without looking at its internals - get the minified version.
» Minified (for production)
» Source code (for development)

Additional downloads

» Basic Skin - CSS only
» Vista Skin - CSS & Images
» OSX Dashboard Skin - CSS & Images
» jQuery UI Skin - CSS & Images

Try the examples at the bottom of this page to check out the different skins!

MooTools Forge version

There is a fork of this project that's been included in the MooTools Forge. It fixes many smaller issues, and hooks into MooTools' own Date object. Check it out.


I am using a Git repository for code management. Feel free to contribute.


Requires MooTools Core v1.2+

Tested on Firefox 3 (OSX, Win XP, Win Vista), Safari 3 (OSX, Win XP), Safari 4 beta (OSX), IE 7 (Win XP, Win Vista), IE 8 (Vista) and even IE6 (XP @ VirtualPC). Please help extend this list.


new DatePicker(input-target-selector [, options-object]);
where the input-target-selector naturally is a MooTools selector (eg. .datepickers or #great_picker). The datepicker will be effective for all selected input elements. Usage examples are given at the bottom of this document.

Usage with Ajax

When loading content by Ajax after creating the DatePicker instance, simply re-scan the DatePicker targets by calling attach(), for example:

Using the Skins

Just include the CSS file of a skin, and specify the datepicker class (pickerClass) through your datepicker options. I recommend putting all skin files in one subfolder on your filesystem. Since image-locations are stored as relative paths in CSS, the images will work out of the box.


OptionDefault valueDescription
pickerClassdatepickerCSS class for the main datepicker container element.
toggleElementsnullToggle your datepicker by clicking another element. Specify as a MooTools selector. The resulting elements are mapped to the selected datepickers by index (the 1st toggle works for the 1st input, the 2nd toggle works for the 2nd input, etc.)
days['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

Labels for the days, allows for localization.

dayShort2Length of day-abbreviations used in the datepicker.
months['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

Labels for the months, allows for localization.

monthShort3Length of month-abbreviations used in the datepicker.
startDay1First day of a week. Can be 0 (Sunday) through 6 (Saturday) - be aware that this may affect your layout, since days in the last column will likely have a style with right-margin: 0px;which would need to be applied to a different day. Default value 1 is Monday.

Enable/disable timepicker functionality. See timepicker example below. Hours/Minutes values can be changed using the scrollwheel.

timePickerOnlyfalse(v1.16+) set to true to use datepicker for time-selection only; recommended formatis H:i; will automatically force timePicker and startView options into timepicker mode

Enable/disable yearpicker functionality. Makes it much easier to change years.


Amount of years to show in the year-picking view. Be aware that this may affect your layout.

formatd-m-YVisible date format. Does not affect the actual output when your form is submitted (refer to the inputOutputFormat for that). Supported format symbols are described in the "Dateformatting" section.
inputOutputFormatUDefine how the input value of the original datepicker input element is interpreted. After selecting a date, it's value will be again formatted in this format. Refer to the "input/output format" example.

The default value U is a Unix-timestamp. Supported format symbols are described in the "Dateformatting" section. For example: to use MySQL dates 1-on-1 simply set Y/m/d.

If you encounter problems with your formatting, try enabling the debug option, it will alert date-parsing errors.
animationDuration400Duration of the slide/fade animations in milliseconds.
useFadeInOuttrue (false on Internet Explorer)

Whether to fade-in/out the datepicker popup.

startViewmonthInitial view of the datepicker. Allowed values are: time(only when timePicker option is true), month,year, decades
allowEmptyfalseWhen set to true the datepicker intializes empty when no value was set (instead of starting at today). In addition the backspace- and delete-key will remove a value from the input. Check out the Allow empty example below.
positionOffset{ x: 0, y: 0 }Allows you to tweak the position at which the datepicker appears, relative to the input element. Formatted as an object with x and y properties. Values can be negative.
minDatenullMinimum date allowed to pick. Blocks anything before. Formatted as an object with a date and format property, which allows specification in any format you want. Example: { date: '10-03-2009', format: 'd-m-Y' } or { date: '2009/11/28', format: 'Y/m/d' }
maxDatenullMaximum date allowed to pick. See minDate.
debugfalseWhen enabled, will not hide the original input element. Additionally, any formatting errors will be alerted to the user.
onShow$emptyEvent hook triggered when the datepicker pops up.
onClose$emptyEvent hook triggered after the datepicker is closed (destroyed).
onSelect$emptyEvent hook triggered when a date is selected.
(v1.16+: comes with 1 argument, a standard javascript Date object representing the selected Date)

Requested/planned features

  • Support for date-range picking
  • Prepare for MooTools 1.3 (2.0?) (personal todo)


The date-formatting functions featured in the DatePicker support basic PHP date-format syntax. Supported symbols are listed below. Unsupported symbols will just be output as provided. To use the supported symbols literally, escape them with a \.

  • y - Two digit representation of a year
  • Y - Four digit representation of a year
  • m - Numeric representation of a month, with leading zeros
  • n - Numeric representation of a month, without leading zeros
  • M - A short textual representation of a month, three letters
  • F - A full textual representation of a month, such as January or March
  • d - Day of the month, 2 digits with leading zeros
  • j - Day of the month without leading zeros
  • D - A textual representation of a day, three letters
  • l - A full textual representation of the day of the week
  • G - 24-hour format of an hour without leading zeros
  • H - 24-hour format of an hour with leading zeros
  • g - 12-hour format of an hour without leading zeros
  • h - 12-hour format of an hour with leading zeros
  • a - Lowercase Ante meridiem and Post meridiem
  • A - Uppercase Ante meridiem and Post meridiem
  • i - Minutes with leading zeros
  • s - Seconds, with leading zeros
  • U - Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)

Creating your own skin

The Datepicker generates very clean XHTML, with many class-hooks for CSS. Refer to the existing skins for a speed-start. Some notes:
  • The previous, next and close elements have textual contents («, », x) by default; as done in the additional skins, these can be hidden using (for example) text-indent: -999px style
  • The body element has 1 unclassed child, which in turn has 2 unclassed children. These are used for animation, and should be ignored. Their styles are based on the body class and should have no influence on the rendering of your datepicker. Just imagine the body element directly contains either the years, months, days or time class.
  • The class selected is added to the date/month/year representing the current value.
  • The class unavailable is added to any date/month/year which is outside the configured range (using the minDate and maxDate options).
  • Every day element also has a day0 ... day6 class added, indicating which day of the week it is (0 being Sunday through 6 being Saturday).
  • Every week element also has a week0 ... week5 class added, indicating which row of weeks it is (there is always 6 weeks displayed).
  • Every month element also has a month1 ... month12 class added, indicating which month of the year it is.
  • Every year element also has a yearX class added, where X simply is the index of the displayed year (0 being the first year).



Some basic examples, showing the use of different skins.

» view code


window.addEvent('load', function() {
	new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista' });
	new DatePicker('.demo_dashboard', { pickerClass: 'datepicker_dashboard' });
	new DatePicker('.demo_jqui', { pickerClass: 'datepicker_jqui', positionOffset: { x: 0, y: 5 } });
	new DatePicker('.demo', { positionOffset: { x: 0, y: 5 }});


<label>Datepicker with Vista skin:</label>
<input name='date_B' type='text' value='' class='date demo_vista' />

<label>Datepicker with OSX Dashboard skin:</label>
<input name='date_B' type='text' value='' class='date demo_dashboard' />

<label>Datepicker with jQuery UI skin:</label>
<input name='date_B' type='text' value='' class='date demo_jqui' />

<label>Datepicker basic (CSS only):</label>
<input name='date_B' type='text' value='' class='date demo' />

	width: 150px;
	color: #000;

Yearpicking / Timepicking

Two examples that show how you can enable or disable yearpicking and timepicking.

» view code


window.addEvent('load', function() {
	new DatePicker('.demo_noyear', { pickerClass: 'datepicker_vista', yearPicker: false });
	new DatePicker('.demo_time', { pickerClass: 'datepicker_vista', timePicker: true, format: 'd-m-Y @ H:i' });


<label>Datepicker without yearpicker:</label>
<input name='date_B' type='text' value='' class='date demo_noyear' />

<label>Datepicker with timepicker (use mousewheel to change time):</label>
<input name='date_B' type='text' value='' class='date demo_time' />

Allow empty

Allowing no value by setting the allowEmpty option to true. Press backspace or delete to clear the selected date again.

» view code


window.addEvent('load', function() {
	new DatePicker('.demo_allow_empty', {
		pickerClass: 'datepicker_dashboard',
		allowEmpty: true


<label>Datepicker starting at and allowing no value:</label>
<input name='date_allow_empty' type='text' value='' class='date demo_allow_empty' />

Toggle by Element

Toggle the DatePicker through a separate element. Click the calendar icon.

» view code


window.addEvent('load', function() {
	new DatePicker('.date_toggled', {
		pickerClass: 'datepicker_dashboard',
		allowEmpty: true,
		toggleElements: '.date_toggler'


<input name='date_toggled' type='text' value='' class='date date_toggled' style='display: inline' />
<img src='img/calendar.gif' class='date_toggler' style='position: relative; top: 3px; margin-left: 4px;' />

Restricted date-range

An example showing how you can restrict the input range of dates.

» view code


window.addEvent('load', function() {
	new DatePicker('.demo_ranged', {
		pickerClass: 'datepicker_vista',
		inputOutputFormat: 'd-m-Y',
		yearPicker: false,
		minDate: { date: '10-03-2009', format: 'd-m-Y' },
		maxDate: { date: '25-06-2009', format: 'd-m-Y' }


<label>Datepicker restricted to dates between 10-03-2009 and 25-06-2009:</label>
<input name='date_B' type='text' value='20-03-2009' class='date demo_ranged' />

Starting value (input/output value)

These examples show how you can set the starting value by simply putting it in your original value tag. Additionally, you may use the option inputOutputFormat to specify how to interpret this value, and how it will be output again after picking a date.

Please note: The debug option is enabled which will show you the original input and its actual value (the first input element), which is normally hidden. The second input element is the datepicker.

» view code


window.addEvent('load', function() {
	new DatePicker('.demo_value', {
		pickerClass: 'datepicker_jqui',
		debug: true

	new DatePicker('.demo_value2', {
		pickerClass: 'datepicker_jqui',
		inputOutputFormat: 'Y/m/d',
		debug: true


<label>Datepicker starting at Unix-timestamp 1234567890 (14th of Februari 2009):</label>
<input name='date_B' type='text' value='1234567890' class='date demo_value' />

<label>Datepicker starting at 2009/06/24 (to read as 'Y/m/d'):</label>
<input name='date_B' type='text' value='2009/06/24' class='date demo_value2' />

Localized Month/Day labels

This example shows how simple it is to change the month/day labels in another language.

» view code


window.addEvent('load', function() {
	new DatePicker('.demo_dutch', {
		pickerClass: 'datepicker_dashboard',
		days: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
		months: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'October', 'November', 'December']


<label>Datepicker with Dutch labels:</label>
<input name='date_B' type='text' value='' class='date demo_dutch' />

Add comment

Comments (321)

16-04-2009, 13:00
simply awesome!
16-04-2009, 15:08
this is fantastic. There are many other mootools datepickers out there that I've tried, but this one seems the most promising for my current project. U have saved me many many hours of work. Thank you!!
16-04-2009, 16:28
My favorite yet. I'll be trying it out and making it work with cakephp.
14-05-2009, 08:05
Best date/time picker I've come across by far. Too bad I'm restricted to jQuery in my current project =(
14-05-2009, 09:03
Martin Blapp

I tried to get the DatePicker running with FormCheck, but was not successfull. Standalone (without your code) FormCheck worked, but with your DatePicker, FormCheck didn't work anymore.
I tracked this down to FormCheck also doing validation on the original input field (even though set to "display: none"). I fixed this by modifying FormCheck not to validate elements that are "display: none".
16-05-2009, 15:31
Aaron Dixon
This is a great tool. It works wonderfully and is the best I have found for any of the major JS frameworks. Have you thought about trying to get this added to the official More build of MooTools?
17-05-2009, 11:39
Matthew Higgins
I love this, I really do!
18-05-2009, 22:08
Riad Marrakech
thanks for sharing, very awsome
19-05-2009, 21:06
Great script, and very usefull.

Second time I have needed a datepicker and timepicker in one. Thank you very much.

Is there a way to set the value of the field to a specific timestamp? so if I check a check box somewhere:
var picker = new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista', timePicker: true, format: 'Y-m-d H:i:s' });
//var started is the checkbox;
started.addEvent('change', function() {
usertime.set('value', '1242763047');
27-05-2009, 13:01
Fábio M. Costa
Thats a really cool and well made script.
Great documentation too.
06-06-2009, 08:37
i'd like to see simple keyboard support too (using the arrow keys to select a date and then press enter to use the selected date).

Maybe in the future ? :-)
12-06-2009, 19:21
Jason Beaudoin
Ok. I made some modifications that allows for the separation of the Year and the Month. The month go to the year menu (to pick a month) and the year title that links directly to the decades menu. Also has some other changes. See: for complete info and download for those who like it's functionality.
16-06-2009, 18:40
Hi , this looks so cool, u rocks
17-06-2009, 10:29
Thanks for great script.
18-06-2009, 23:22
Uwe Duesing
Very, very nice. Thanks a lot for your time and effort.
30-06-2009, 14:25

Is there a way to set the date via javascript? I tried the method, but this doesn't work if the date input hasn't had focus. The onFocus event sets the this.input and this.vsiual properties which are used in the select method.
05-07-2009, 14:57
The way I did it was this, assuming cal is the reference to the DatePicker object, and $('myinput') the input control in my HTML page.

var val ='2009-07-05' ;
var formatted_val =cal.format (
new Date (cal.unformat (val, cal.options.inputOutputFormat)),
) ;
$('myinput').value =val ;
$('myinput').getNext ().value =formatted_val ;

Hope that helps,
06-07-2009, 09:24
I used a similar workaround, but the getNext() increases the coupling with the DOM. If the position of the sibling element in the DOM changes somehow (which is not unthinkable imho) you're screwed. I was really looking for a somewhat more elegant solutions, but couldn't found one without some serious refactoring of the DatePicker class.
13-07-2009, 16:22
Matt L
Has anyone had a problem with this in Internet Explorer 6 coming up under 'select' tags? And if so, any solution beyond hiding the selects?
13-07-2009, 17:29
@Matt: you will have to hide the selects, but can perfectly use the onShow and onClose events for that. Something like this in your options will work (and only affects IE6):

onShow: function() {
if (Browser.Engine.trident4) $$('select').setStyle('visibility', 'hidden');

onClose: function() {
if (Browser.Engine.trident4) $$('select').setStyle('visibility', '');

I consider making this part of the official release. Any thoughts?
13-07-2009, 17:54
Matt L

Right, that seems good, I just worry about the users being frightened that the inputs are disappearing. I ended up just moving it to the right which will do for now. Mostly, I will try to convince them to upgrade their browser.

I think you could add it in to the next release, but as an option not as a default.

Thanks so much for your help,
16-07-2009, 23:29
@Matt: You could use the iframshim from mootools.more instead of moving it, or hiding the select boxes.

datepicker = new DatePicker(".datefield",{ pickerClass: 'datepicker_vista', startDay: 0,
datepicker.IframeShim = new IframeShim(datepicker.picker).show();
27-07-2009, 07:09
phil doughty
way sweeeeeeeet!!!
28-07-2009, 18:29
Nigel Holder
Great calendar - if it had week number with hours (24 hour format) and minutes that would be so sweet: 24HH:MM.

A Calendar I'd so much like to match with mootools is here:

I'd like to add this functionality if you are too busy?
28-07-2009, 22:45
Nigel Holder
The more I use this date picker the more I like it - it easily exceeds what I have been waiting for!

By the way: I wasn't suggesting matching the whole functionality of the jBoss date picker in my previous posting; simply the week number).
29-07-2009, 04:44
Hey, does anyone know how to dynamically change the "minDate" setting of a calendar, so I can prevent people from choosing a date set... by another date picker?

so, if I have two of them, I could hook them together so dateA is always before dateB

thanks for sharing this, it's one of the best pickers I've tried (and I've tried LOTS)
31-07-2009, 17:45
The tool is great but one thing I can't figure out is how to force the pop-up calendar to always appear on the visible portion of the window. For example if the date entry field happens to be at the bottom of the viewable part of the page the calendar appears out of view. If the user scrolls down the calendar disappears. It would be very handy for it to always appear where it can be seen by the user.
03-08-2009, 21:36
Excelent script! Works like a charm.
I've been trying to set te minDate propertie of an input acording to the selected date of another. For example, to pick the check in and check out dates of a hotel. For example, if I pick 2009-08-08 for the check in, automatically set that date as the minDate for the checkOut (maybe, plus X days).
I've been trying with the onShow or onClose events, but I can't make it works. Could you help me?
Thanks in advance :)
04-08-2009, 07:03
Great tool.
Do you have any RSS thread (Datepicker only) which we can link to, to get latest update as soon as there is one ?
Also, do you have any change log to see improvements from one version to an other ?

Some ideas of improvements:

-Possibility to place it in line (always shown).
-Possibility to drag it.

I'd like to add this :
It would be great to allow one to change the minDate dynamically. I use 2 datepicker (start date and end date). When i select the start date, i'd like the end date to auto ajust to the start date AND the datepicker not to allow dates before the start date.

Hope you understand. I guess i could do it by recreating an instance of DatePicker onSelect of the first one.

Again, thanks for this tool!
07-08-2009, 19:48
Scott Stevens
You have definitely made the best calendar script that I have seen. I would like to know if there is a way to have the calendar show at a location on the page(relative - say inside a empty div) and then stay as you select a date while updating a var or form/hidden field??

10-08-2009, 16:14
This is really good! some questions though...

Is it possible to have the calendar inline (always displayed) above the input element?
Is it possible to start the calendar in decades mode, then month, then date?

If anyone could answer this question, or build a calendar that can ;) I would greatly appreciate it!
11-08-2009, 09:37
Really nice script.
17.5kb as minified really doesn't justify its use for me though. Possible just needs a different way to compress it? I tried bananascript dot com and got it down to 6kb. You might want to dish that out as the minified versin with an explanation of what charset to use on the script include :))
12-08-2009, 06:22
Daniel Buchner
I didn't see an AM/PM selection option, is it inferred as being part of the 12 hour time option or is it just yet-to-be thought of?
12-08-2009, 11:38
is there a way to add picker just for one element?

something like :
var picker = new DatePicker(myElement,{....});
17-08-2009, 08:18
Very good datepicker...but i have a question...
How can i empty the box after declaration with javascript?
17-08-2009, 09:47
I have another question:
How can i take the value of input box with javascript to control?
17-08-2009, 10:26

Some ideas (sent by mail + 1 new) :
-(new !) Add the possibility to show week numbers on each week line.

-Auto-date update two datepickers according to the value of one-another :
on minDate update, if stopdate's currently selected date < minDate then stopedate's currently selected date = minDate.
Same for max date
on maxDate update, if stopdate's currently selected date > maxDate then stopedate's currently selected date = maxDate.

Some problems i encoutered :

-When i configured mindate with current time. Current day wasn't selectable. I had to clearTime() so that current day would be selectable.
-My "value input" START_DATE was empty after creating the DatePicker. It would be great that upon creation of a datepicker on an input (here, what i call the "value input"), IF that input is empty then either the date input is also empty or the value input is filled with the date input value. Maybe this could be set up using options ?
-I tried to access $$('input[name=START_DATE]').retrieve('datepicker'). That was unsuccessful. Is it normal ? do i have to do something particular ? I thought it was logical that the datepicker would be attached to the input by default.

-Make it possible to specify minDate: 'today'. I think this is something alot of people would use.

Always and forever : thanks for this tool !
18-08-2009, 05:53
I just wanted to mention to anyone trying to set the value of one input from the value of another. One person commented that dateA should always be before dateB. I don't think it's currently possible because this script hides the original html input element and creates another one without an id. So when you refer to your input element via id, it might change the hidden one. I have not tested this to prove, but I think that is why it will not work. It would be nice if the author used another method. That ways we could still set the value of the input element from other JS.

Other than that, it's very nice.
18-08-2009, 16:09
Another quirk :
var oDatePicker = new DatePicker(oDate,{
format: 'd-m-Y',
toggleElements: '#DateResume',

#DateResume is a SPAN containing the date.
oDate is an input[type=hidden]

1-The DatePicker doesn't auto-update the span, have to do it onSelect.
2-The DatePicker appears in the top left corner instead of under the SPAN (i suppose it's cause it can't find the input)

Thanks again
18-08-2009, 18:41
Jugal Bandi
Really nice, but I still don't get how to set the value. When I set the 'value' of my element to "seconds since the epoch". That's what shows up, not the formatted value.

Also when the page loads the current date time shows, but the 'value' is empty if the form is submitted. So, how can I set the value and have the format correct? Hope this is clear.

Using in a script section called via body=onload():

mydatepicker = new DatePicker('.demo_time', { pickerClass: 'datepicker_vista', timePicker: true, format: 'd-m-Y @ H:i' });

And this in the form:
<input name='mydate' type='text' value='$context{dt}' class='date demo_time' />

The html is built in a Perl script to show $context{dt} becomes initialized with a time that was previously submitted. That value would be something like: 1249544543 . Would also like to change this value with javascript and have the format correct.

Any thoughts? Thanks.
19-08-2009, 06:53
Anybody help me? ;(

How can i empty the box after declaration with javascript?
How can i set and get the value of input box with javascript to control?
20-08-2009, 11:34
Take a look at the workaround Cyrille (05-07-2009, 16:57) described. It isn't a very elegant/safe solution, but as far as I know the only one available.
20-08-2009, 12:42
I solved one problem :
If your main input is invisible (display none or type hidden) the picker won't appear in IE7 and will be displayed at the top left corner in FF 3.5

To solved this i changed the code like that:

line 148
- this.onFocus(item, clone);
+ this.onFocus(item, clone, togglers[index]);

line 177-178
- onFocus: function(original_input, visual_input) {
- var init_visual_date, d = visual_input.getCoordinates();
+ onFocus: function(original_input, visual_input) {
+ var init_visual_date, d = ($defined(toggler) ? toggler:visual_input).getCoordinates();

Hope this helps
20-08-2009, 12:44
One type :

line 177
- onFocus: function(original_input, visual_input) {
+ onFocus: function(original_input, visual_input, toggler) {

sry for the 2nd post
20-08-2009, 13:50
thanks treur, i solve. I use $('id_element').getNext().value
24-08-2009, 17:01
Great script, however I have a question. How do I set a value via javascript?

// this will change the value of the form field
// but will not update the display

I need a way to update the value and display of a date field.

26-08-2009, 04:58
Thank you very much.Great scripts guys!
26-08-2009, 08:52
Nice articles, and I had try to do it in the simple html form and it work. However, I am trying to put it to the ajax form, then it doesn't work. How and where to use the function:


to attach the datepicker in the ajax form so that it will work?
27-08-2009, 06:23
jake williamson
1st class date picker ;)

i have 2 questions: i'm trying to set the date and time for an update form. i've set the value of my textbox field to:

value='27/08/2009 @ 15:00'

and the format to:

format: 'd/m/Y @ H:i',

but when the page loads, the date sticks but the time updates to the system time of my machine!

the 2nd question is i like to disable the form fields (to restrict users typing incorrect dates and then having to validate them) but i'm a user meaning i can access the form field when the page is submitted...

i usually use a hidden field to store the values of disabled fields, but how do i pass the date/time value to this field?

any info you can provide would be awusm,


28-08-2009, 05:49
jake williamson
ah ha! got one thing nailed - managed to pass the date to the hidden field:

onSelect: function(d) {
$('hidden_field').value = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":00";

but still cant get the form fields to load the time correctly? i've tried every format i can think off...



28-08-2009, 07:14
jake williamson
gottit! need to set:

format: 'd/m/Y @ H:i'


inputOutputFormat: 'd/m/Y @ H:i'

works a treat ;)
29-08-2009, 18:27
Dan Grigore

In case anybody needed this, I am using the script on an input with a label related to its id, so i modified it a bit to assign the id to the clone and remove it from the original input. Starting line 130 of the uncompressed script.

var display = item.getStyle('display');
var originalID = item.getProperty('id');
var clone = item
.setStyle('display', this.options.debug ? display : 'none')
.store('datepicker', true) // to prevent double attachment...
.store('datepicker', true) // ...even for the clone (!)
.removeProperty('name') // secure clean (form)submission
.setProperty('id', originalID)
.setStyle('display', display)
.set('value', init_clone_val)
.inject(item, 'after');

31-08-2009, 14:47
Great staart...just finished integrating DatePicker and was impressed at how easy it was to implement. For some reason however (even with debug=true) the calendar opens exactly one month ahead of the actual date selected. So if I have 2009-09-02 in the debug field, when I click in the calendar field it starts the calendar at 2009-10-02??? Am I missing something?
31-08-2009, 14:49
Help please? Here's my script:

window.addEvent('load', function() {
new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista',inputOutputFormat: 'm/d/Y',debug: true });


Filed input must be m/d/Y and it must display like that and write to the database like that. But while it writes to the database ok...and displays ok...the hidden field ALWAYS displays the wrong jumps ahead one month? So if I input 09/03/2009 the hidden field will display 03-10-2009 and have that date selected on the pop up calendar? How do I make it pick the right date?
31-08-2009, 15:04
Wow, freaky, similar issue posted 2 seconds before mine.

Anyway...I think Jake was onto something....with

onSelect: function(d) {
$('hidden_field').value = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":00";

But being a javascript weakling...I don't know how to implement it or adapt it?

Anyone help?
01-09-2009, 07:26
Several of our customers were affected by a bug in the date picker yesterday.

If you start with the date 08/31/2009 and click on the calendar then click the right arrow to go to the next month it goes to October instead of September!

Can this be fixed?
01-09-2009, 15:49
Thank you very much for this beautiful Picker!

May I suggest you add the following to the CSS so the Picker layout won't be affected by any existing CSS:

.datepicker .header {
margin: 0;
padding: 0;
background: none;

In my case I had already a .header class with some margin, padding and background set which led to layout problems in the Picker.

01-09-2009, 18:53
Thanks for this awesome date picker! Would you consider providing an option to embed a calendar into a page so that it shows upon dom ready rather than requiring an onClick event to display?
02-09-2009, 12:16
Nice picker, but it doesn't work correctly if date changes after the picker is attachet. Either .attach() needs to refresh the date from the original input or there should be .reload method which reloads the date from the original input field.
04-09-2009, 08:13

we made a keyboard navigable version of this script :
04-09-2009, 10:29
31st of a month(like 31-Jan-09.) will be shown as 1st of that month(1-Jan-09)
Iam not sure if this is bug or something Iam doing is wrong
06-09-2009, 20:04
Many sanks for your work!
Can i make offer for you datepicker: when i attach image for toggle calendar way text field lost action on Focus event for show calendar instance? It mast be work too.
11-09-2009, 09:17
Nice work but having a small problem. When setting mindate in the future (eg first selectable day two days from now), the datepicker is one day off in IE. In FF the datepicker shows correct the first time, but once the date is selected it is also one day off (first selectable day 3 days from now).
13-09-2009, 14:58
Very nice work, but sadly unusable. Much customer/user doesn't understand to change the year and month intuitively :(
they click very often at the arrows ...
It is sadly a killer argument in much projects :(

May you change the number of the year and month with a select-box and if the time-picker is enabled you add the timepicker (smaller) at top of the chooser instead of adding the second step.

Grettings from Germany
17-09-2009, 15:24
I added a refresh function to the DatePicker. In the uncompressed Javascript version, add a line just before line 174


On the new line 174, add

//save reference to clone for later use
this.clone = clone;

Then add the following code after


(so on line 178 that is)

refresh: function(){
$$(this.attachTo).each(function(item) {
// determine starting value(s)
if ($chk(item.get('value'))) {
var init_clone_val = this.format(new Date(this.unformat(item.get('value'), this.options.inputOutputFormat)), this.options.format);
} else if (!this.options.allowEmpty) {
var init_clone_val = this.format(new Date(), this.options.format);
} else {
var init_clone_val = '';
this.clone.set('value', init_clone_val);

Now you can set the new UNIX timestamp in your own input/select, and call the refresh function of the DatePicker.
18-09-2009, 20:57
I'm using your CSS based date picker. I'm using CSS with basic skin. but I see some special characters («) for previous and next buttons.
Also the width of the title (month year, next button, close button) doesn't extend fully.
Also i see some blank space between border and calendar. I'm using IE7. When i run the demo from this website it works fine. But when I refer to downloaded files datepicker.js and above is little off..
21-09-2009, 16:44
Jonas Gedrat
Show, show show.
Have the InvalidWeekDays implemented??? or setDisabledWeekDays, this i found in CalendaPopup.JS, is very usefull.
21-09-2009, 23:47
thanks for great tool. is it possible to start date picker reverse like, first year and month and at last the day for using it as birthdate picker?
23-09-2009, 16:58
I'm in the process of implementing a struts2 datetimepicker replacement that uses your datetimepicker.js as the UI side of things. I've had a difficult time getting the formats matched up between struts2, xwork, and your date picker.

I almost have it working but encountered what I think is a bug. My inputOutputFormat is "n/j/y". If the date that is passed in looks like "9/12/09", datetimepicker.js will throw an error that it cannot format the year. I believe this is because your regex matches the "1" in "12", and therefore thinks the chunk to match against "y" is "/09" rather than "09".

My temporary workaround is to reverse the order of the regex like "3[01]|[12][0-9]|[1-9]" instead of "[1-9]|3[01]|[12][0-9]" so that it picks the biggest match first.

Not sure if this is the best solution, but thought you might want to know about a possible bug.

Otherwise, great job and thanks for the tool!
24-09-2009, 13:46

Thanks for the great tool!!
We are using the datepicker in our .net 3.5 website project there is a need to disable some of the dates on the calendar depending on the selection in a dropdownlist server control.

I have never worked with mootools
Please help!!!
25-09-2009, 09:43
datepicker toggled by Element:

how can i set the current date into the input box onshow

my workaround (it is very dirty^^):
datepicker.visual.set('value', datepicker.format(datepicker.d, datepicker.options.inputOutputFormat));

is there a more simply way?
25-09-2009, 10:39
another question "datepicker toggled by Element"

i can't change the input-field-value from outside after it is bind on datepicker
example $('id_input_field').value='';
28-09-2009, 12:50
Maybe option "yearPickerOnly" to choose only years? Would be consistent with other date inputs...
28-09-2009, 16:49
I think I found a weird bug -- can anyone help please?

When I set a Datepicker in the page, the visible value in the text field is right (today's date). But if I submit the form that has the Datepicker in it, without changing the default values, the form field comes out blank? If I change the value, everything gets submitted the right way.

Any suggestions?
29-09-2009, 10:34
Sadly Chrome (v: is not go, datepicker dosent showup.
In FF3.5/Opera 10 works like a charm
30-09-2009, 10:59
great work thanx!
01-10-2009, 21:02
Really great plugin. I like how you handle tabbing into and out of the textfield. I've added an onShow event to make sure the calendar is shown (in case the page isn't scrolled down enough). Might be a good addition to the class:

var cal = $$('.datepicker_vista')[0];
var screenHeight = window.getSize().y;
var screenBottom = window.getScroll().y+screenHeight;
var calendarHeight = cal.getSize().y;
var calendarBottom = cal.getPosition().y+calendarHeight;
var newY = calendarBottom+10-screenHeight;

Also, for birthday pickers, it's nice to hide the year in the title. So I added an option for that:

this.picker.getElement('.titleText').set('text',this.options.months[month]+' '+this.d.getFullYear());

And last, although your documentation and your example show minDate and maxDate to be inclusive, when I try it on my own page it's exclusive. Any thoughts offhand? I can send you the code if you want to pm me. The page isn't live yet.


02-10-2009, 06:20
Hmmm... disregard the issue with minDate/maxDate. Seems like it was a caching issue in my code. Working correctly now.
02-10-2009, 20:08
Already postet this in the blog ... so here it goes again:

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
03-10-2009, 16:00
Niceness, indeed!
05-10-2009, 07:47
my date still formatted (05-10-2009) in the input text..

my setting:
inputOutputFormat: 'd/m/Y',

and html
<input size="30" value="05/10/2009" class="date date_pick" type="text"></code>

i hve set the value is current date..

please help.. thanks

06-10-2009, 17:30
Why do we need to 'clone' the element? I can't see why? How coul I use it without clone?
13-10-2009, 21:44
Beer to you! Thank you for contributing to the community :)
16-10-2009, 11:57
E. Muller
I suggest adding the following function to set the minDate dynamically:

setMinDate: function(smindate, sformat) {
this.options.minDate = this.unformat(smindate, sformat);


Also i would suggest initializing the minDate's hour, minute and seconds and even milliSeconds, so that date comparisons will be more accurate.

So the "formatMinMaxDates" function should be:

formatMinMaxDates: function() {
if (this.options.minDate && this.options.minDate.format) {
this.options.minDate = this.unformat(, this.options.minDate.format);

if (this.options.maxDate && this.options.maxDate.format) {
this.options.maxDate = this.unformat(, this.options.maxDate.format);

Anyways, good work on this datepicker, works very well ! Thanks.

17-10-2009, 02:28
Am I daft or is the calendar off by 1 day? I use a starting unix date of 1255752000, which is Saturday, October 17, 2009 12:00:00 AM, and the calendar shows October 16. In the reverse direction, I select Oct. 17 on the date picker and it spits out 1255838400. That date is Sunday, October 18, 2009 12:00:00 AM. What am I doing wrong? Thanks in advance.
21-10-2009, 10:27
Vince Poile

This app looks great!!! I'm looking to replace my current date picker, I'd love to use this one but I was wondering whether its easily possible to separate the output in to 3 inputs/selects this is essential for the app its going into.

If its not possible I will look at writing the functionality into the datepicker if thats ok?

Please let me know!
21-10-2009, 20:29

Great components but it lacks the functionality to alter the value remotely via javascript...

I took the liberty and fixed this problem with the following solution:

I define an additional event for the original input element inside the attach() function of the class. (In my version of the script - which is 1.16 - this is line 143):

item.addEvent(\'change\', function(value) {
this.input = item;
this.visual = clone;
var d = new Date(this.unformat(value, this.options.inputOutputFormat));{ day: d.getDate(), month: d.getMonth(), year: d.getFullYear() });

After this you can change the value of the element by firing the change event, e.g.

$(\'mydatepicker\').fireEvent(\'change\', \'2009-10-23\');

Please make sure to set the inputOutputFormat property according to your date format!

Cheers and thanks for the component!

Pepe / Developer at
21-10-2009, 20:31
... and please note the the comment tool you are using is not handling the quotation marks very nicely! :-)
22-10-2009, 14:18
This is the best datepicker for mootools I've seen so far, thanks for sharing!

The only thing I'd like to see implemented, is the option "zIndex": if you're using the picker in a modal window, it will be displayed behind it. It's just 1-2 lines of code to modify, I've did it to my copy and thought I'd share the idea.

Thanks again!
24-10-2009, 19:37
Wow, really great date picker. Much better than the clientcide one. My only request would be to have the cursor focus back into the input after selecting a date, so you can easily tab to the next field.
27-10-2009, 03:17
This looks really awesome! Thanks very much for the great work! Now I'm using it with my site:D
30-10-2009, 10:34
Does it follow MySQL standard Date formatting??? where the input from database is 'Y-m-d' and not 'd-m-Y'...
30-10-2009, 10:48
But of cause, it can:

inputOutputFormat: \'Y/m/d\'

It\'s a really great little tool, Thank you.
30-10-2009, 15:02
Very niceful script.

I'd like to know if this script allow us to open the calendar directly when the mouse is over the form field ?

i don't want the users to have to click in the form field to open the calendar.

Can you tell me if it is possible ?

31-10-2009, 13:08
I'm having trouble with the string-formatted date.

My input/output format is "Y-m-d", my display format is "F j, Y".

Dates in September, like "2009-09-17" are being formatted as "October 17, 2009", not "September 17, 2009".

I haven't figured out why. Seems to be happening only with dates September. All my September dates are being rendered as October.

But then if I use the datepicker to change the date, September is fine. This is only happening when the datepicker is initialized. It makes no sense.
31-10-2009, 14:16
I fixed your bug. It was an interesting one to find.

No wonder it wasn't noticed before -- It will only happen on days like today (Oct 31) when you are initializing to a month which doesn't have this date (eg September 31, which doesn't exist).

line 711 in the "unformat" method, this line fails:
case 'n': d.setMonth(v - 1); break;

I can't change the date to September, because the current date is October 31 and there is no September 31. The method fails silently, and I end up with the wrong month.

To fix this, just add this before the "switch" on line 707:

For general consumption, you might want more sophisticated logic, but that fixed my problem.

31-10-2009, 22:28
This is a great tool, but I do have some suggestions:

- Make it work well with OverText (There are a few issues, which I suspect is due to the cloning of elements)

- Have it implement Events, and fire onShow / onClose events, rather than manually calling the functions (this allows multiple functions to be called onShow / onClose, and also allows adding of events nicely after the DatePicker object is created)

- Allow the picker to be manually shown and hidden externally (I know you can set a manual toggler on creation of the DatePicker, but this isn't very flexible)

- For ultimate customisation, instead of having manual "new Element("s everywhere, allow customization of the generated HTML. Maybe you could specify some sort of "default templates" and then populate these with generated data? (All I was personally after was changing the symbol for moving left and right in months, but the HTML template route seems like it could then handle practically every possible customization.)

31-10-2009, 23:18
And another suggestion:

- Add an option to add a \"Skip\" button to the time picker.

- When firing the event \"onClose\", pass along an object with details of the selected time: i.e. the time itself and whether \"Skip\" was pressed in the suggestion above

The reason the above would be useful is that for an events calendar, whether a time is needed may be event-dependent. Also: on selection of the date / time, there may have to be some code to deal with whether the user want to specify a time or not.
04-11-2009, 10:06
I too have a suggestion: Make z-index a parameter!

The div that contains the picker needs a z-index, i tried getting the calender to work on a page that had a background div and it took me some time to figure out why it wouldn't show.
04-11-2009, 13:42
I also encountered a bug that occurs with IE: If you want to use 'y' for two-digit year representation, IE will produce a '109' string because of its different implementation of Date.getYear().

Sure one could argue it's IE's fault, but it's a bug no matter how you put it, and can be easily mended if you use

Date.getYear() is obsolete, please don't use it. :)
06-11-2009, 11:54
Great datepicker!
One 'bug' or at least strange behavior. When I load the full moretools, the minDate and maxDate fields break functionality. Without those two, everything works fine.
07-11-2009, 15:29
What a great and useful class !
I've just noticed something wrong (t.tostring()) in the unformat function and Mootools 1.2.4 when option mindate is set...

08-11-2009, 15:06
the refresh function by Rekcor is not free of bugs. The clone is saved in the main DatePicker-objekt, but you have to save it in the attachTo-Objects to get right results if you have more than one Date-Field.
So change :
this.clone = clone; => this.attachTo[index].clone = clone;
this.clone.set('value', init_clone_val); => item.clone.set('value', init_clone_val);
09-11-2009, 16:19
Craig Vincent
DatePickers don't work when using Date() extentions in mootools more

After implementing some stuff using Mootools more, our datepickers failed to work. I eventually tracked it down to a problem in formatMinMaxDates() - the date extentions has added a Date.format() function to native date objects, so the test to see whether this.options.minDate/maxDate was a Date always assumed it wasn't a date. - Lines 91 & 94. Here's the fix I put in place: Beginning at line 90: formatMinMaxDates: function() { if (this.options.minDate && $type(this.options.minDate) != 'date') { this.options.minDate = this.unformat(, this.options.minDate.format); } if (this.options.maxDate && $type(this.options.maxDate) != 'date') { this.options.maxDate = this.unformat(, this.options.maxDate.format); this.options.maxDate.setHours(23); this.options.maxDate.setMinutes(59); this.options.maxDate.setSeconds(59); } } Best wishes, Craig
or cancel

After implementing some stuff using Mootools more, our datepickers failed to work.
I eventually tracked it down to a problem in formatMinMaxDates() - the date extentions has added a Date.format() function to native date objects, so the test to see whether this.options.minDate/maxDate was a Date always assumed it wasn't a date. - Lines 91 & 94.

Here's the fix I put in place:

Beginning at line 90:
formatMinMaxDates: function() {

if (this.options.minDate && $type(this.options.minDate) != 'date') {
this.options.minDate = this.unformat(, this.options.minDate.format);
if (this.options.maxDate && $type(this.options.maxDate) != 'date') {
this.options.maxDate = this.unformat(, this.options.maxDate.format);


Hope this helps!

10-11-2009, 11:51
Ivan Gasparetto
There is a small bug when running on IE7 (not sure about other browsers) when you want to display the 2 digits year: 'y'.
On line 625 we have:
# case 'y': f += (100 + t.getYear() + '').substring(1); break
It is returning 109 instead of 09
I replaced that with this to fix the problem:
# case 'y': f += (t.getFullYear() + '').substring(2); break;

10-11-2009, 11:52
Ivan Gasparetto
My email :)
11-11-2009, 14:26
Very nice tool!

Ihave one suggestion. It would be nice that you could type de date manually.
12-11-2009, 09:40
Jeffrey Ropp
There appears to be a bug when using IE6 on XP.
For some reason, the last row of dates doesn't show up. For example, in March 2009, the last visible row is 23-29 which means 30 and 31 aren't selectable. Your thoughts?
12-11-2009, 10:15
Very nice component, saved my a lot of work. Thank you!

I fixed a glitch with the min/max month being one month off in renderYear.

Instead of "... +1 < ..:" and "... -1 > ..."
maybe "... <= ..." and "... >= ... + 1" is clearer.

I hope the pasting code works:

limited: function(type) {
var cs = $chk(this.options.minDate) && this.options.minDate;
var ce = $chk(this.options.maxDate) && this.options.maxDate;
if (!cs && !ce) return false;

var cc = this.d;
switch (type) {
case 'year':
return (cs && cc.getFullYear() < cs.getFullYear()) ||
(ce && cc.getFullYear() > ce.getFullYear());
case 'month':
return (cs && cc.getFullYear()*12+cc.getMonth()+1 < cs.getFullYear()*12+cs.getMonth()) ||
(ce && cc.getFullYear()*12+cc.getMonth()-1 > ce.getFullYear()*12+cs.getMonth());
case 'date':
return (cs && cc < cs) || (ce && cc > ce);
12-11-2009, 18:37
Jeffrey Ropp
A follow-up to my previous bug report on IE6 on XP.
Playing with the CSS, I've found a simple workaround. I changed the height of the days. For whatever reason, IE renders them differently and there isn't enough space for the last row to show up on the fixed size background. Here's what worked for me (looks ok on other browsers - just a little extra space at the bottom):

.datepicker_dashboard .days .day {
float: left;
text-align: center;
overflow: hidden;
width: 23px;
padding-top: 1px;
height: 12px; /* Modified by Jeff Ropp to deal with IE6 */
margin: 0 1px 1px 0;
13-11-2009, 12:23
great tool!

but i had problem with value of original input. when one doesn't select anything, the original input stays clear, so when the form with date submits, the value i got is not a default value, but null.
so i added some improvements to your attach function:
// determine starting value(s)
if ($chk(item.get('value'))) {
} else if (!this.options.allowEmpty) {
var init_orig_val = this.format(new Date(), this.options.inputOutputFormat); // init original control to default value
item.set('value', init_orig_val);
} else {

i think you can include something live this in feature releases
14-11-2009, 12:28
Ken Marfilla
I think it's better if manual editing of the text field is enabled not just delete all on backspace. I'm having an issue on integrating cpojer's inputmask class with this since manual editing is disabled.

I also suggest that instead of using your own date parser and formater, use Date.Extras in Mootools.More. This way you can focus solving more usability issues as they arise.
17-11-2009, 22:25
I want to use only time picker but input box is still showing date and doesn't update the box. If I enable debug then a separate input field is shown. I am not sure what I am doing wrong.


<script type="text/javascript" src="mootools-1.2.4-core-jm.js"></script>
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type='text/css' href='datepicker.css'>
<script type="text/javascript">
window.addEvent('load', function() {
new DatePicker('.demo_ranged', {
pickerClass: 'datepicker',
inputOutputFormat: 'H:i',
timePicker: true,
timePickerOnly: true,
startView: 'time'




<input name='time' type='text' value='' class='date demo_ranged' /></body>
18-11-2009, 07:03
hey - really nice calendar! Great job...

We also needed users to be able to manually enter their own dates and search on those, so we modified the addEvents on the clone as follows, which obviously enables user input and marries up entered changes with the hidden text box:

else {clone.addEvents({
'keydown': function(e) {
if (e.key == "tab") {
this.close(null,true); }}.bind(this),

'focus':function(e){ this.onFocus(item, clone);
'keyup':function(e){ this.input.set('value', this.visual.get('value')); }.bind(this)

thanks and best wishes
19-11-2009, 17:18

very nice work.

Is it possible to show specific start-day other than today or value in textbox??


20-11-2009, 01:49
I dont know if anyone could help me, but im completely stuck.

I have been dealing with this error for DAYS. And cant find a solution.

Every time a click a get the error: this.picker is null (line 36 of datepicker.js)

It has something to do with the usage of the jquery library im using for input validation scripts, because I just made a quick simple page where there is just the input for the datepicker, and it works fine. But when i import the jquery library it gives that error.

Using firefox/safari is not a big deal, because the website works OK, but using IE is not. You can not move the side bar of the browser and also the rest of javascript does not work as they do in other browser, because every time a click does not matter where, it gives the this.picker is null error. (On Safari it says: 'this.picker [null]' is not an object

I just hope there is someone that could help me, because im just going crazy....

Thank you!!!
20-11-2009, 18:02
Just wondering how to format the text input box - Am I being thick, or can't it be done in the relevant CSS file
21-11-2009, 07:54
Hi, its possible to work with mootools 1.1 cause I am using joomla 1.5.
29-11-2009, 20:12
this is simply nice. But I am having trouble to get it work. Sorry I am real dummy in javascript, but this should not be so difficult to implement. I am getting following error when trying to copy code from examples
"DatePicker is not a constructor"

Could someone advice pleaaase?
my code includes following:

<link href="datepicker_dashboard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="datepicker.js"></script>

<script type="text/javascript">
window.addEvent('load', function() {
new DatePicker('.date_toggled', {
pickerClass: 'datepicker_dashboard',
allowEmpty: true,
toggleElements: '.date_toggler'
<input name='date_B' type='text' value='' class='date demo_dashboard' />
02-12-2009, 13:03
for those, like me, who have to use a language with accented characters, here is a simple workaround for labels :
1- convert your character to unicode, here for example
2 - insert it in the list of, say, months, like :
months: ['Janvier', 'F\u00E9vrier', etc ..
Thats it.
03-12-2009, 16:37

Thanks for this script, it looks and works great. I have 2 suggestions that I think would make the script perfect.

1. A way to spread the values across multiple inputs e.g. I could have 3 drop-downs, one for day, one for month and one for year. Updating the calendar updates the selected values in the 3 drop-downs but it also allows the user to change a date value without using the calendar. This would be very usefull for when javascript is not available.

2. When you use togglebyelement and then change the text in the textbox the output value is not updated.

I hope you consider implementing my ideas .
08-12-2009, 09:43
I'm new in this business , so how to I put this calendar in my php based form. I uploaded js file to server, and ? How do I call to calendar ? And if I choose to work with time option - can I POST date and time in different variables ? how ?

with Best Regards

08-12-2009, 18:45
thanks for the fantastic script!
10-12-2009, 14:28
there is a chance to add the zindex property? the picker is awesome, if it only have the zindex property will be better :D haha!!

if somebody has a version with the zindex can you send it? thank you in advance
10-12-2009, 14:59
Sorry, i just find the answer, in the Skin you have to add the following statement
z-index: 9999;
or the number that you need..

12-12-2009, 21:46
Ragnar Holthe
Problem in IE, not FF: When setting minDate value in the future, minDate is not selectable in Internet Explorer when first pressing toggler element. After date is selected, pressing toggler element once more shows minDate selectable. Why is this? I'm using vista skin
16-12-2009, 01:15
Carlos Carrasco
Hi you all, i red someone asking for autoOpen feature, is really simple. Just add an id name to the input field you are using with DatePicker Class and then call onFocus().
"the javascript"
myDatePicker = new DatePicker('.demo_value', {
pickerClass: 'datepicker_jqui'
"the html"
<input type="text" name="some_name" class="demo_value" id="theId" />

That´s all ! ! ! !
I hope you find this usefull.
Sorry for my low level English ;)
16-12-2009, 14:13
Wonderful work, thanks. And nice refresh() function Rekcor. Does the trick.
08-01-2010, 14:24
how can i limit datepicker to help me pick only month and year from year view . i dont want it to switch to month view to get particular date. i am interested only in getting m/Y
11-01-2010, 13:50
Jim Reijers
I'm totally 100% with Nigel's second comment here:

"2. When you use togglebyelement and then change the text in the textbox the output value is not updated."

This is essential! Now my users mistakenly think that they can alter the date by changing the text in the textbox. Please fix this soon!

Brilliant picker otherwise. :-)
15-01-2010, 04:50
Regarding licence:
"Attribution — You must attribute the work in the manner specified by the author or licensor"
15-01-2010, 20:54
Congratulations on your website. I want to know the code to write on my site .... "»View code". Thank you ... tanks!
18-01-2010, 16:42
I am having trouble to get it work. I am getting following error when trying to copy code from examples
"DatePicker is not a constructor"

Can anyone help?
28-01-2010, 16:28
Hey Guys,
A simple problem.

The app works fine, I was able to change the date format to match that expected of MySQL. However I am having a bit of a problem with the post data.
When the date is posted it comes up as number, eg. Date selected - 2010-01-28 and the value 1262881619 gets posted. What am I doing wrong???? Or not Doing???
29-01-2010, 10:59
thanks for the great job.

just notice...

you have a small bug in the functions next() and previous()

else if (this.mode == 'month') {
this.d.setMonth(this.d.getMonth() - 1);

should be

else if (this.mode == 'month') {
this.d.setMonth(this.d.getMonth() - 1);

to fix next() and previous() actions from the end of the month to next month.

i.e. from 2010-01-30 -> next month ;-)
31-01-2010, 14:46
Uh oh, found a little bug.

If I set 1 January 2009 (or any year) to be the minimum date, then you cannot select the 1st. The minimum is actually 2 January!
02-02-2010, 20:48
Hi All

Just wanted to say I've been reviewing all the comments above and have applied all the bug fixes that I could replicate from recent comments. Please see my forked instance of the code in git repo here:

See the wiki page for notes on changes.

Credit to marfillaster for some of the major code updates.

If you spot any issues with my instance feel free to use the issues section in github and I'll attempt to review and resolve.

I hope these updates help some of you. Enjoy.
04-02-2010, 14:39
Nigel Crane
I am absolutely loving this date picker however I am having one issue.

I am doing this in Ajax

var fm = new Element('form', {'action': '#', 'method': 'post', 'id':'FormElement'}).injectAfter('InsertionID')); // Add A Form Element to put my injected foprm into

var sp = new Element('input', {'type': 'text' , 'class' : 'date UID_1234' , 'style' : 'display : inline', 'id': 'UID_1234','value':'20, Jan 2010'}).inject('FormElement'));
// New Input Element

var sp2 = new Element('img', {'src' : 'assets/calendar.gif', 'class': 'date_toggler', 'id' : 'clickdate', 'style' : 'position: relative; top: 3px; margin-left: 4px;'}).injectAfter('UID_1234'));// new Calendar IMG To Click Onto

x1 = new DatePicker('#UID_1234', {pickerClass: 'datepicker_dashboard', allowEmpty: false, toggleElements: '.date_toggler', inputOutputFormat: 'd, M Y', onClose: function(){updateAFieldByUID('UID_1234');}});
// Add The DatePicker Class to Get It All Working.

Now I can see by the activity in the DOM that another element is being cloned.
I am however seeing this cloned element and not mine.
And when I Select the value in the datePicker It merely puts it into its newly created element in a YYYY-MM-DD format and does not show me my element again.

I understand roughly how the class is working but can't see at what point things are be hidden an shown.

04-02-2010, 17:03
Nigel Crane
Ignore Previous Comment. it was the format option that I was looking for

08-02-2010, 21:41
Is it possible to show 3 months instead of just one using this datepicker ?

I cant seem to find how to implement this using the Options above.

10-02-2010, 11:35
Add readonly properties to input or catch manual change date in input!
11-02-2010, 14:32
Hi, you have a serious bug in your script.

If i attach it to input with pre-defined value "31-03-2009", and CURRENT month is February, it becomes "03-03-2009".

Problem is in unformat function. You should set year and month as soon as possible (don't forget about leap years).

Something like this:

//modified - first of all set month and year
if (a['y']) d.setFullYear(a['y'] < 30 ? 2000 + a['y'].toInt() : 1900 + a['y'].toInt());
if (a['Y']) d.setFullYear(a['Y']);

if (a['m']) d.setMonth(a['m'] - 1);
if (a['n']) d.setMonth(a['n'] - 1);

if (a['M']) {
a['M'] = this.options.months.filter(function(item, index) { return item.substring(0,this.options.monthShort) == a['M'] }.bind(this))[0];

if (a['F']) d.setMonth(this.options.months.indexOf(a['F']));

for (c in a) {
var v = a[c];
switch(c) {
case 'y': d.setFullYear(v < 30 ? 2000 + v.toInt() : 1900 + v.toInt()); break; // assume between 1930 - 2029
case 'Y': d.setFullYear(v); break;
case 'm':
case 'n': d.setMonth(v - 1); break;
// FALL THROUGH NOTICE! "M" has no break, because "v" now is the full month (eg. 'February'), which will work with the next format "F":
12-02-2010, 17:00
Brilliant brilliant class! :) Thanks for sharing great code like this, and keep up the good work!

17-02-2010, 17:37
How to make time (H:i) always be 00:00?
When I pick date only, we have both date + current time in Unixtime stamp.
18-02-2010, 11:03
var dt1 = new DatePicker('.date_toggled', {
pickerClass: 'datepicker_dashboard',
format: 'd-m-Y',
timePicker: true,
allowEmpty: false

var reqNota = new Request({
url: '',
method: 'get',
onComplete: function(response){
$('inputdate').value= '1267117200';


<input name='inputdate' id='inputdate' type='text' class='date date_toggled' style='display: inline'/>


your datepicker.js is workin fine.. but i got a problem when i want to set value on my datepicker inputdate.

on the onComplete request i got nothing on my input date change... :|

$('inputdate').value= '1267117200';

how to resolve this??? pls help me.. thanks...
01-03-2010, 11:19
Hello, i found a misterious bug only on IE with the format: d/m/y

the year is misformated : 01/03/110
instead of : 01/03/10

in the fonction format(t, format) :

"case 'y': f += (100 + t.getYear() + '').substring(1); break"

the method getYear() seems to be deprecated in javascript.

i tryed to replace with :

"case 'y': f += (t.getFullYear() + '').substring(2);break;"

and it's works fine.
11-03-2010, 00:38
this is a great stuff; but how do I get the date value I pick in RIGHT format?? I check arguments in onSelect event and all I get is a weird date object like this

[Fri Mar 05 2010 16:17:45 GMT-0800 (PST) { $family=Object}]

while i\'m expecting something like 1268954265

12-03-2010, 13:57
How do you change the timepicker to a 12 hour clock? Setting the "inputOutputFormat" effects the value on the back end and "format" is the visible value, but how can you adjust the part where the user uses their mouse wheel to select the time?

Any help would be appreciated.
13-03-2010, 00:32
Hey, great work man!!!
Best datepicker on the net so far! =)

Just one quick question though: how can I make the current day (today) to always display in different color in the month view calendar? This is useful for users to know what day it is today when they browse through different months. Help is much appreciated.
15-03-2010, 19:11
Silly question but I really don't know how to fix it. I want to use the datepicker with the "Toggle by Element" calendar option. I copy/paste this ".date_toggler" class but I can't see it defined somewhere. So when I press on the calendar gif, the datepicker works ok and I can pick a date. But if I want to press again on the gif (so that I won't pick a date) the popup calender will not toggle off.

What am I doing wrong? :/
16-03-2010, 14:38
Here is my solution to the AJAX reload problem. Instead of using the window.addevent method to initiate the new DatePicker, I trigger it with an image and an onload:

<input name="StartDate" type="text" class='demo_vista' value="">

<img src="transparent.gif" onload="new DatePicker('.demo_vista', { pickerClass: 'datepicker_vista', allowEmpty: true, format: 'm/d/Y', inputOutputFormat: 'm/d/Y' }); "/>

Now it works each time the form gets re-loaded to the page via AJAX.
16-03-2010, 16:36
Anuradha Ratnaweera
I am using the simple image-less style you have created. Thank you!

Did a small "improvement". Instead of using a 4px padding to get date cells centered vertically, I used "line-height: 25px; height: 25px;" which makes them perfectly aligned.

Do keep up the good work!
16-03-2010, 20:27
I found a perplexing bug with FireFox 3.6. It seems the date picker is clearing the history data from all subsequent form fields. I can reproduce this simply by filling in a form and soft refreshing the page, all fields prior to and including the date picker field retain the values I entered, all subsequent fields are cleared.

This is a particular issue for form error messages, which direct the user to go back and try again. Upon going back they are greeted with a near empty form and have to re-enter their information.

tested in IE and Opera also, and they worked correctly.
20-03-2010, 03:56
this is by far the best datepicker i've seen yet. it was so simple to integrate site-wide.. thank you so much!
26-03-2010, 13:47
Thank you for this great datepicker!

Unfortunately, on IE8, the datepicker somehow changes the size of input-box. Even in the examples on this page, the input fields don't keep their css-widths of 150px, but are as wide as the page.
26-03-2010, 14:11
i am sorry, please forget my last comment - everything works fine after I downloaded the latest version of mootools.

thank you!
30-03-2010, 10:44
I would like to have a symbol for clearing the date if empty is allowed.
30-03-2010, 12:43

I detect one bug if the month selected is march if you press botton to go one month back it goes again to march.
30-03-2010, 13:58
Andrew M. Andrews III
Nice picker! I'm having some problems getting it to display properly in FF 3.6... sometimes the characters show up but not the containers/backgrounds/etc.

I developed another powerful date/time picker that uses jQuery (and an older one that uses Prototype), check it out at and let me know what you think!
01-04-2010, 11:56
Had some problems yesterday (2010-03-31) with the dates displayed. An input with original value '2010-04-02' (YYYY-MM-DD) showed in the datepicker '2010-05-02'. When selecting next month from March, it gave May. Used FF3.6.2, MooTools 1.2, DatePicker 1.16. Today: problem gone without changing anything. Amazing plugin anyway!
02-04-2010, 14:10
Great script,
Can anyone help, after selecting a date from the popup I would like a form to automatically submit the form, tried a few things but getting nowhere, any help appreciated.
03-04-2010, 18:32
not working with joomla
13-04-2010, 19:24
This wonderful plugin is now in the MooTools Forge too!

It has some additional fixes and new features too!
14-04-2010, 10:30
Hey man, thanks for this awesome script.
I wanted to let you know that in the vista CSS, line 131 (datepicker_vista .days .titles)
should also define width:100%, it helps to define it more strongly. In my page, the days got crunched without it.
20-04-2010, 19:16
Stacey Abshire
I was thinking of using this for a project, but was wondering if it is possible to have it always showing, and not functioning as a popup? Thanks!
21-04-2010, 17:37
Hi everyone, this script is truly amazing..

I am actually a fresh in implementing the javascript like above, can any one please teach me help to use the script above?

I shall truly appreciate it~ thanks
28-04-2010, 14:52
Jurgen Westerhof

Thanks for your script. Nice to have a ready made script for date inputs.

I made a modification and since you're license is to 'share alike' I thought I'd post it here as well. It adds two buttons to allow you to scroll a year per click in addition to scroll a month per click (previous/next). I made a zip with the modified files available for download at (contains: buttons.png, datepicker.css and datepicker.js)

30-04-2010, 17:34
Jon Baker
Re this comment:

> Had some problems yesterday (2010-03-31) with the dates
> displayed. An input with original value '2010-04-02'
> (YYYY-MM-DD) showed in the datepicker '2010-05-02'. When
> selecting next month from March, it gave May. Used FF3.6.2,
> MooTools 1.2, DatePicker 1.16. Today: problem gone without
> changing anything. Amazing plugin anyway!

I experienced the same issue today, and found the bug. The problem is occurring because of the way the date is being built. It begins with the current date (in your case, March 31, 2010). Then it goes through the formatting (I'll use your example to illustrate) - First it sets the year, which doesn't change. Then it sets the month to Apr 31, 2010 - and because this is not a valid date, it rolls it over to Mar 1, 2010. Then it sets the day to "2", so your result is Mar 2, 2010. This is why on April 1 you did not experience the same issue.

The fix I found is to add on line 695 the following:


before the "for (c in a)" loop. This forces the starting date to 1, and eliminates the possibility for rolling over.

Thanks for a great plugin, by the way. I absolutely love this and use it all over the place.
06-05-2010, 10:55

I think there is a little bug in the class. In the function <b>'unformat'</b>, in the case 'j', I changed the pattern to this:

<pre>case 'j': r = '[12][0-9]|3[01]|[1-9]'; break;</pre>

Because when I put a number with two digits, it take only the first digit.

07-05-2010, 15:51
Hi there! Great class!

In my current application I only need the time picker, on other fields I need the date picker so I'd like to use this class for both purposes. How to set up the datepicker, only using the time picker?
10-05-2010, 16:19
Hi I can\'t seem to implement the script on my site... I tried every possible way I know to implement it but none of those attempts were succesfull, and you said it is easy to implement;

I think it doesn\'t work as the other javascripts does...

11-05-2010, 08:28
just updated to the current version and had to see, that the input fields are no more formatted by initialisation. So i added this back in the attachmethod with following code:

if ( (d = Date.parse(item.get('value'))) != null ) {
item.set('value', d.format(this.options.format));

maybe anyone needs it. (Or is this possible on any other way?)
11-05-2010, 08:34
woops.. just noticed that i took my version from mootools forge. So my mentioned issue may not show up here?

i like this one better because it has mooLang support.

But anyway: this IS definitly the BEST datepicker out there!!
19-05-2010, 14:45
good work ;)

to support accents for months (in FR by exemple), i replace ...set('text' by ...set('html' in renderYear method line 555 and in renderMonth method line 474
23-05-2010, 07:48
Guido Tielen
Wow, that was easy and very nice to see. Thanks for sharing.
31-05-2010, 14:36

Today May 31, 2010. I am trying examples. The datepicker pop-ups very well. But when I scroll month in the future, datepicker jumps from may to july at once without June.Is it bug or feature? :-)
31-05-2010, 15:03
I use this datepicker in my project. I selected the date in June but in next popup time datepicker shows this date in July!!! but return selected date to my ajax script correctly.

Ups!!! When I try to set min allowed date in 2010-06-01 datepicker shows it in 2010-07-01.

Initialize code:
new DatePicker('.date_selector_start', { pickerClass: 'datepicker_vista',
inputOutputFormat:'Y-m-d', format:'F d, Y',
onSelect:function(dt){<<my ajax>>}

This is the first time when I get any troubles with this datepicker.

31-05-2010, 15:43
I like this script very much!

I noticed one tiny bug in it.
The calendar jumps from Mai to July.
In order to select a date within june you have to switch back to June first.
03-06-2010, 08:26
Great date picker.

Does anybody know how to change the date in the input.

$('dob').value = '12/12/2000'
06-06-2010, 09:57
is there any way to dock calendar instead as picker?
14-06-2010, 12:08
Rajendra Banker
hello all,

i have implement date picker success fully,

But the problem is arises when i try to implement date in smoothbox.

Kindly give me some idea
15-06-2010, 15:10
Great script!
A small suggestion: I needed to combine several date/time-values into one single hidden field, but the input field that holds the datepicker's value does not fire a "change" event, so I added

609: this.input.fireEvent('change');

16-06-2010, 02:45
A R.
I have some problem with IE6,7. In my input form have dropdown list (selection)lower the datepickers input, it work on IE8 but IE6,7 it display under dropdown list that become I can not select date that.
How I can fix it?

Please help me!!!. Thank you very much of all help.
21-06-2010, 07:48
Hi All,

Please help me, i can not retrieve date from my mysql db. It is just displaying recent date/time. But the date in db is previous date.
input tag is:
<input name="date_time" type="text" id="date_time" size="20" class="date date_time_piker" value="<?php echo $date_time; ?>" />

Thanks in advance.
24-06-2010, 23:26
Carlos C.R.

just in case it helps anyone:

I need more complex conditions to know which dates to allow. For example I don't want the user to select weekend days. As a workaround I've patched the code adding a onSelectCheckAllowedValues event that only updates the input if a user function returns true:

to pach:

On line 77 add (and ',' on line 76 of course):

onSelectCheckAllowedValues: $empty

And on line 604 change the select method whit this:

select: function(values) {
this.choice = $merge(this.choice, values);
var d = this.dateFromObject(this.choice);
if(this.options.onSelectCheckAllowedValues(d) ) {
this.input.set('value', this.format(d, this.options.inputOutputFormat));
this.visual.set('value', this.format(d, this.options.format));
this.close(null, true);

Ideally you should check for when onselectcheckallowedvalues is not defined.. but it serves my purposes as it is now
03-07-2010, 17:46
great date picker, thanks. one feature that is missing is the ability to block various dates; Aeron Glemann did a very good job by implementing this in the same way we define cron jobs (see and search for the "block" properties). on the flip side, his date picker is missing the time picker and the fabulously great way of easily selecting years and months.
06-07-2010, 12:03
Best datepicker ever!
08-07-2010, 00:22
Chadwick Meyer
1. I have a calendar and if they mark the event as "all day" I want it to only ask for the dates, otherwise it also asks for the time as well. So is there an easy way to access the datePicker object via another javascript query, in order to disable the timePicker on the fly? e.g. date_picker.timePicker = false;

2. Feature Request: how hard would it be to support 12 hour times? with an AM/PM that flipped as your scrolled through the hours.
08-07-2010, 08:51
As soon as I also include the Date class from MooTools more package, the Datepicker crashes in the unformat method. Have you thought about using the format/parse Methods of the Date class from MT more instead of your own format/unformat?
This would save you a lot of code and it would be nice to be able to use your (really wonderful) picker also with the whole MT package loaded :-)

Best regards and keep being awsome!
08-07-2010, 09:35
This may be a bug:

If I use a maxdate or mindate and then open the calendar in the year view, the months are not made unavailable correctly. I fixed the issue by replacing:

var ms = ('' + this.d.getFullYear() + this.leadZero(this.d.getMonth())).toInt();

in the limited method with:

var ms = ('' + this.d.getFullYear() + this.leadZero(this.d.getMonth() + 1)).toInt();

(added "+1") Then everything works fine. Hope that helps.

Best regards.
08-07-2010, 09:48
Sorry - forget about the last comment. I used the Date class to input the boundaries and the getMonth() method worked not the way I expected. Sorry for that!
12-07-2010, 17:38
I fixed problem with minDate by changing if statement in formatMinMaxDates function like this:

formatMinMaxDates: function() {
if ( &&
this.options.minDate.format) {
if (this.options.maxDate &&
this.options.maxDate.format) {

I didn't try it for maxDate but I assume it's same fix.
12-07-2010, 18:00
Update for above, the if statement should be

if (this.options.minDate && && this.options.minDate.format) {
20-07-2010, 14:05
Lovely implementation, and easy to use. I'd like to see this with a means for passing an array of dates to be disabled. That would allow it to be utilised by a booking system. What do you think; is it even possible?
23-07-2010, 07:45
Hello Guys,

I found a bug in date picker.
if i select 31st day of May and alter if i try to change the month it appears on the same month i.e May.

Simply this is for the Months which is having 31 days.
can any one let me know how it can be fixed.

29-07-2010, 23:01
Looks good!

I'd also suggest to add a z-index parameter to avoid hiding when used within "modal" windows (StickyWin, StickyWin.Modal, PointyTip, etc.).

On the other hand this problem can be solved in a static way by adding "z-index: 12500;" within the ".datepicker" selector.
30-07-2010, 12:14
I have a problem with correct usage of labels. I have the my field with an id an a label with for="id_of_element". This is used to put the cursor into the form fiel when i click on the label. Sadly the date picker has to kill the id because it creates a copy of it. Thus the label functionality is also removed which is not so good.
Possible solution: kill the id property of the original (hidden) field an move it to the newly created field instead. To be able to prevent this behaviour if anybody dont want it, you count introduce a new option to control this (true/false). Should be very easy and only a few lines of code.
30-07-2010, 19:55
Claus Mandal
Your beautiful work is making the competition work harder to make a better one :) To keep ahead of the competition, If you get some time, I suggest you implement some of the following, which should be obvious by its names:


- Scrollwheel could be used in date, month and yearpicker, just as it works in timepicker, for better and consistent user experience.

- Booking scenario where two pickers(from,to) show with whatever setup selected(time, date etc.) and they "talk" with each other to ensure valid selections.

Just some ideas that I think would kill the competition some time into the future :)

I use your picker in a CMS.

Keep up the good work!
08-08-2010, 10:06
Can't get it working. Please add some ready made examples for a novice. Thanks!
10-08-2010, 12:13
Very great picker but maybe not yet complete...
Here a fix for the thing @Taracque said, about the attach function:
It's all about the uncompressed code version 1.16.
1. You must give the attach function a new parameter: newvalues (line 102).
2. Then you append at line 119 this:
if (!!newvalues){
item.set('value', newvalues);
var init_clone_val = this.format(new Date(this.unformat(item.get('value'), this.options.inputOutputFormat)), this.options.format);
$( + '_clone').set('value', newvalues);
} else
so it becomes at the end 'else if'.
3. At line 144 you append this:
.set('id', + '_clone')
4. Try the fix in your browser.

Success with your plugin and keep going!
26-08-2010, 15:48
June, 21, 2010, Prayas said :


Hi All,

Please help me, i can not retrieve date from my mysql db. It is just displaying recent date/time. But the date in db is previous date.
input tag is:
<input name="date_time" type="text" id="date_time" size="20" class="date date_time_piker" value="<?php echo $date_time; ?>" />

Thanks in advance.


I got the same pb, any solution ?

Best regards
26-08-2010, 16:40
I just put inputOutputFormat: 'Y-m-d H:m:i', and it seems to resolve the probleme.

Is it good solution ?
31-08-2010, 12:56
I think I have found a bug.

If you use an input date format that specifies the month before the day, the unformat function works through it to create a date object in the same order that it finds it.

This is okay most of the time, but because it creates a date object (which defaults to today) if the month is set before the day, on in some instances it can cause issues.

Take for example today - 31st August 2010. I have an input date format of Y-m-d. The input date is 2010-09-01 (tomorrow, Sep 1st). However, the unformat function will work through this in the order year, month, date.

Date object created (defaults to Aug 31, 2010)
Year set to 2010 (Aug 31, 2010)
Month set to Sep (hang on - there's not 31 days in Sep - so it sets to Oct instead!)
Day set to 1st (Oct 1, 2010)

Obviously a temporary workaround is to use input formats that have the day before the month.

It's a great date picker though, this is the first problem I've ever had with it! Thanks!
04-09-2010, 09:08
I will like to know how I can display a list of days?
for example "01-09-2010", "03-09-2010", "10-10-2010"
Thank you for your help
06-09-2010, 06:05
whenever i clicked the date picker then it goes to another location with fields of date,day,year how it is possible
11-09-2010, 07:36
Hello! How can I set a datepicker field value from javascript? I also tried with the best simple way with: document.getElementById('myElement').value = 'BlaBla', but its don't works! Can somebody help me? :)
13-09-2010, 15:50
I'd like to do an additional action after onClose(). My problem is, my datepicker is build with an css-selector, so i can't identify myself which input field it was:

var datepicker = new DatePicker('.dateField', {
pickerClass: 'datepicker_vista',
format: 'd.m.Y',
inputOutputFormat: 'Y-m-d',
allowEmpty: true,
toggleElements: '.dateToggle',
onClose: function() {
// want to do something with the current input fields:
// the hidden and the visible one. e.g:
// visible_element.blur();
// hidden_element.anythingelse();

I'm combining it with a formcheck also based on mootools. Best practice would be, to return both input fields with the function or any way similiar to that. Or I haven't found a way how I can find out the element(s). The Id of that element will do it too.
13-09-2010, 16:57
Bug with some date formats (eg french format: d/m/Y)
The unformat function uses this order to build a date. If you try to set the date to 31/08/2010, the picker displays 01/08/2010.
This is due to the order (day, then month, then year)

Today is 13/09/2010
I want to set the date to 31/08/2010

You set the day to 31 => 31/09/2010 (doesn't exists)
The date is considered as 01/10/2010
Then you set the month => 01/08/2010 (bug!)

Here's a quick hack:
In unformat function, line 696, insert this code:

var aSorted = {};
var aTagOrder = ['y','Y','m','n','M','F','d','j','G','H','g','h','i','s','U'];
for (var iTag = 0; iTag < aTagOrder.length; iTag ++) {
for(c in a) {
if (c == aTagOrder[iTag]) aSorted[c] = a[c];

//for (c in a) {
for (c in aSorted) { // Replacement

There should be a cleaner way to do this of course...
14-09-2010, 07:21
@lmfap this seems not to be a bug. My used german layout d.m.Y is also ordered day, month and then year.

I checked it following: Type in the input field this date: 31.08.2010. After that clicking on calendar to see whats selected. And the correct day 31 is selected...
14-09-2010, 07:39
The bug occurs when you display the field with a value already selected.
The wrong value is in the text field (not the selector)

Before the datepicker initialization, the value in the text field is 31/08/2010:
<input type="text" value="31/08/2010" ...>

When the javascript executes, the value becomes 01/08/2010.

14-09-2010, 09:32
Agree, but your problem i cannot reproduce. But it is a bit really strange... I have a feeling that you may test your input on another computer to be really sure. Javacript's date depends on local date settings (when i'm not wrong).

I've found a bug too, that its not clearly working properly. Maybe that has to do something with each other. Refering to my configuration:
format: 'd.m.Y',
inputOutputFormat: 'Y-m-d',

my console command to check the fields:
console.log('hiddenfield.value: '+$('hiddenfield').value);
console.log('visiblefield.value: '+$('visiblefield').value);

Lets start my steps. Default is:
(all ok, my values are empty by default)

Then I type in date '31.08.2010' and click somewhere out of that field, so that blur() action triggers:
hiddenfield.value: 2010-08-31T00:00:01
visiblefield.value: 31.08.2010
(see, the hiddenfield format is wrong)

I open the calendar and click on that day:
hiddenfield.value: 2010-08-31
visiblefield.value: 31.08.2010
(now its correct)

I click on the calendar icon:
hiddenfield.value: 2010-08-31
visiblefield.value: 31.08.2010
(nothing changed)

and then clicking somewhere else than calendar (so that calendar closes without a change):
hiddenfield.value: 2010-08-31
visiblefield.value: 31.08.2010
(nothing changed)

clicking into field that it gains focus:
hiddenfield.value: 2010-08-31
visiblefield.value: 31.08.2010
(nothing changed)

clicking somewhere out of that field, so that blur() triggers:
hiddenfield.value: 2010-08-31T00:00:01
visiblefield.value: 31.08.2010
(seems that the datepicker do something wrong on the blur() event)
14-09-2010, 09:34
And maybe can you help me, or any idea, with the problem posted at 13-09-2010, 17:50? :)

14-09-2010, 12:09
@Dionysius> Here's an example:
<input type="text" name="dtTest" id="dtTest" value="31/08/2010" />
<script type="text/javascript">
window.addEvent('domready', function(){
new DatePicker('#dtTest', {
pickerClass: 'datepicker_vista',
allowEmpty: true,
format: 'd/m/Y',
inputOutputFormat: 'd/m/Y'

When the page is loaded '01/08/2010' is displayed in the input. '31/08/2010' is expected. No need to click anywhere.

I'm sure the bug is not related to a specific browser. It has been reported by several users with different configurations.
14-09-2010, 12:15
@Dionysius> Not sure it's the same bug but maybe due to the same code?
Maybe you can check the behaviour of the "unformat" function in detail and try to see why and when it breaks.
14-09-2010, 13:03
@Dionysius (13-09-2010, 17:50)
I think it's impossible to know which picker raised the event without knowing the id.

Maybe you should not use directly a css selector but a loop:

<input type="text" name="test1" class="dateField" />
<input type="text" name="test2" class="dateField" />
<script type="text/javascript">
function attachField(oField) {
new DatePicker(oField, {
pickerClass: 'datepicker_vista',
format: 'd.m.Y',
inputOutputFormat: 'Y-m-d',
allowEmpty: true,
onClose: function() {

window.addEvent('domready', function(){

var aFields = $$('.dateField');
for (var iField = 0; iField < aFields.length; iField ++) {
// You must use a function, otherwise oField would be the same for each loop


17-09-2010, 18:42
This is perfect date time picker, thanks the authors.

one problem is when I tried to set up format: %Y-%m-%dT%H:%i, the input date field showed like '2010-09-22T11:i', 'i' didn't changed to what I wanted number. could someone tell how to fix it, sorry I am not an expert on javascript.

21-09-2010, 11:10
how can i create or get datepicker in on click of a text box or a image?
it works well but not works in run time or when i create it dynamically.
my code:
java script :
<script type="text/javascript">
var debugElmt ='debug');
var debug = function(txt){

// Dashboard skin
new DatePicker($$('.date_toggled'), { pickerClass: 'datepicker_dashboard', toggleElements: '.date_toggler' });

// MooTools.lang support
new DatePicker('i18n', {
positionOffset: { x: 0, y: 5 },
format: '%d-%m-%Y'

<input type="button" value="Add More (if needed)" name="eduAdd" onClick="LoadAcademicForm(form1);" class="button"/>


function LoadAcademicForm
<input type='text' id='txtServedFrom"+(i_exp+1)+"' name='txtServedFrom"+(i_exp+1)+"' readonly='true' value='' class='date date_toggled' style='display: inline'/><img src='images/calendar.gif' class='date_toggler' style='position: relative; top: 3px; margin-left: 4px;' />

plz help some1!!
22-09-2010, 09:48
Maybe the focus event helps you. If you have a checkbox make a onclick event like:

$('id_checkbox').addEvent('click', function() {
if(this.checked == "checked") { // or maybe you have to use $('id_checkbox') instead of this, that i havnt tested
} else {
// do anything when checking box off (delete date or something

That works if you've configured your datepicker showing up the calendar when you click into the input field.
22-09-2010, 11:29
Dave Buchanan
I have found a glitch in the unformat function when using d-M-Y format with a date of 31-Mon-yyyy
I have tracked it down to the following pseudo logic

assuming it is september (or any month < 31 days)
Unformat gets the current date 22-Sep-2010,
gets the day from input 31-Mon-yyyy as 31
calls d.setDate(v) which sets the date to 01-Oct-2010
the month is set to Jan
the year is set to 2010

The display date is now incorrectly set to 01-Jan-2010 where it should be 31-Jan-2010

My work around is to store the day on the case 'j': and call d.setDate(day) at the end of the calculations

add new variable to function header
var day;
case j becomes
case 'j': day = v; d.setDate(v); break;
before the return add

IMHO it is not necessary to call the d.SetDate i the case 'j'

I include my debugging code below

Many thanks for your Class, please let me know if I can give you any further information

Rgds Dave

unformat: function(t, format) {
var d = new Date();
var a = {};
var c, m;
t = t.toString();

var day;

var myMessage = '';
myMessage += "\n input t " + t;
myMessage += "\n format " + format;

for (var i = 0; i < format.length; i++) {
c = format.charAt(i);
switch(c) {
case '\\': r = null; i++; break;
case 'y': r = '[0-9]{2}'; break;
case 'Y': r = '[0-9]{4}'; break;
case 'm': r = '0[1-9]|1[012]'; break;
case 'n': r = '[1-9]|1[012]'; break;
case 'M': r = '[A-Za-z]{'+this.options.monthShort+'}'; break;
case 'F': r = '[A-Za-z]+'; break;
case 'd': r = '0[1-9]|[12][0-9]|3[01]'; break;
case 'j': r = '[1-9]|[12][0-9]|3[01]'; break;
case 'D': r = '[A-Za-z]{'+this.options.dayShort+'}'; break;
case 'l': r = '[A-Za-z]+'; break;
case 'G':
case 'H':
case 'g':
case 'h': r = '[0-9]{1,2}'; break;
case 'a': r = '(am|pm)'; break;
case 'A': r = '(AM|PM)'; break;
case 'i':
case 's': r = '[012345][0-9]'; break;
case 'U': r = '-?[0-9]+$'; break;
default: r = null;

if ($chk(r)) {
m = t.match('^'+r);
if ($chk(m)) {
a[c] = m[0];
t = t.substring(a[c].length);
} else {
if (this.options.debug) alert("Fatal Error in DatePicker\n\nUnexpected format at: '"+t+"' expected format character '"+c+"' (pattern '"+r+"')");
return d;
} else {
t = t.substring(1);

for (c in a) {
var v = a[c];
switch(c) {
case 'y': d.setFullYear(v < 30 ? 2000 + v.toInt() : 1900 + v.toInt()); break; // assume between 1930 - 2029
case 'Y': d.setFullYear(v); break;
case 'm':
case 'n': d.setMonth(v - 1); break;
// FALL THROUGH NOTICE! "M" has no break, because "v" now is the full month (eg. 'February'), which will work with the next format "F":
case 'M': v = this.options.months.filter(function(item, index) { return item.substring(0,this.options.monthShort) == v }.bind(this))[0];
case 'F': d.setMonth(this.options.months.indexOf(v)); break;
case 'd': myMessage += "\nc = d case:d v = " + v;
case 'j': day = v; myMessage += "\nc = d case:j v = " + v; myMessage += "\nd " + d; d.setDate(v); myMessage += "\nd " + d; break;
case 'G':
case 'H': d.setHours(v); break;
case 'g':
case 'h': if (a['a'] == 'pm' || a['A'] == 'PM') { d.setHours(v == 12 ? 0 : v.toInt() + 12); } else { d.setHours(v); } break;
case 'i': d.setMinutes(v); break;
case 's': d.setSeconds(v); break;
case 'U': d = new Date(v.toInt() * 1000);

myMessage += "\nsetting day " + day;

myMessage += "\nreturning " + d

alert (myMessage);
return d;

29-09-2010, 13:13
In lot of languages 2-letters small names not same as first 2 letters of day name. Are possible add some kind of dayShortArr to be able set correct names?
And for months same
30-09-2010, 10:04
Bug reporter

I found a bug / problem in your datepicker, which works fine except for that little bug.

The bug is in the "unformat" function.
In some countries they write a date in the format dd/mm/yyyy instead of yyyy/mm/dd.
Suppose it is now "2010/09/30" or in my country "30/09/2010".
Suppose my input date is "31/08/2010".
In your code, this happens:
var d = new Date(); //d is now "30/09/2010", the current date
Next you split my input date "31/08/2010" into parts and do this:
d.setDate(31); //date is now "01/09/2010" because there is no date 31 in sempteber, this is the problem.

To fix the problem, you have to set the date after all the other properties have been set.
You could do this by declaring a variable "var new_date = null;" just before the for-loop.
Next thing is to replace "d.setDate(v);" with "new_date = v;"
Finally, just after the for-loop you put the text "if(new_date !== null) d.setDate(new_date);"

This should solve the problem.
19-10-2010, 20:22
:O.... awweesomeeee... this is absolutely great... very nice. congratulations
21-10-2010, 06:10
great work - any change to get an updated version for mootools 1.3
25-10-2010, 14:49
Kudos for this great tool.
It's very simple and looks awesome!

Just one comment: With the InputOutputFormat Y/m/d (standard for Mysql) if you leave the value in HTML untouched (value='')
Today's date will show in the input box but on submit the value will return nothing. You need to manually add today's date into the input box value.

<input type='text' name='datemade' class='date dateField' value='<?=date('Y/m/d')?>' />
26-10-2010, 13:19
Steve Lang
I am getting in IE (Versions 7 and 8)
'this.picker' is null or not an object
datepicker.js Line 587
Code:0 Char:3


The Yellow Triangle & Error shown at bottom of page, and - maybe related, the scrollbar will not work.
I have used the unsquashed version her (Tried earlier squashed version earlier - no difference)

Thanks for a great piece of software

09-11-2010, 13:15
Hi, has a bug in object date, if you go to 3º sunday of october (can show in february), the day is repeating. I make some tests and i found then you add a day sum 23 hours. I can see you resolve the problem. Can you tell me how to fixed it too?
My solution is not very elegant.

var tmp = sdt.getDate();
sdt.setDate(sdt.getDate() + 1);
if(tmp == sdt.getDate())
sdt.setTime(sdt.getTime() + 3600000);//3600000 = 1 hour


09-11-2010, 16:20
Hi, I noticed a little bug with min/max dates.

In 'formatMinMaxDates' you cannot assign directly the options 'this.options.minDate' (resp. maxDate in the rest ot the post) with the unformated value because it is used at every focus (indeed, 'show' function calls 'formatMinMaxDates' every time).

One solution is simply to assign 'this.options.minDate.whatever' instead of 'this.options.minDate' in 'formatMinMaxDates', and change 'this.options.minDate' in the whole script (except in the '$chk's of course).

For the rest, your work is really awesome, thanks a lot!
11-11-2010, 00:03
I can`t to test the timepicker, the demo doesn`t work for me. Please explain me how to works this functionality.

12-11-2010, 11:46

is there any method to make it visible always?? Not only after clicking on some element.

Great tool. Thanks.
29-11-2010, 14:01
Thanks... Today is my first day in Mootools... I m wondering.. fantasic
01-12-2010, 07:10
Elnur Akhundov
To make picker able to select between two dates. For example you have to make start date and end date... End date can't be lower than start date.. Here is a code snippet showing how I solve it:

<h3>Date range</h3>
<input name="date_from" id="date_from" size="8" maxlength="11" value="<?=date('Y-m-d'); ?>" /> &ndash; <input name="date_to" id="date_to" size="8" maxlength="11" value="<?=date('Y-m-d'); ?>" /><br />
<div class="form_help">Date from &ndash; Date to. Select period for the banner to show.</div><br />

<script type="text/javascript">
window.addEvent('domready', function(){
new Picker.Date('date_from', {
format: '%Y-%m-%d',
minDate: '<?=date('Y-m-d'); ?>',
onSelect: function() {
$('date_to').value = $('date_from').value;
tc.initialize('date_to', {
minDate: $('date_to').value

var tc = new Picker.Date('date_to', {
format: '%Y-%m-%d',
minDate: $('date_to').value

08-12-2010, 10:51
I can't seem to get $empty defined.
Anyone an idea or solution??
03-01-2011, 17:07
Nithin Meppurathu
Hey man, are you gonna be working on date-range feature anytime soon? It seems that the new mootools update is not causing any issues. I would love to help, let me know!
09-01-2011, 06:58
Nice, really nice ... but not complete.

I am really missing a function that allows me to pick a year (40, 50, etc. years back) - without having to click 50 times ... anyone out there who would?
10-01-2011, 11:05
hei, first of all, cool calender :) works fine. Just wondering is it just me or there is a bug in onFocus: function(original_input, visual_input) {
var init_visual_date, d = visual_input.getCoordinates();
insted of visual_input should be original_input because it possitions the calender tottaly wrong when trying to get position of display:none element.
11-01-2011, 10:37
Really great datepicker!
Just what I needed - I'll make a donation right away!
12-01-2011, 17:18
The best datepicker ever made! But I'm restricted to jQuery :'(
26-01-2011, 02:45
I have to admit, this is the best datetime picker I've ever seen. But I would like to know, is there a way to use it without mootools? I'm building an app with native js and I would love to use your datetime picker.Thanks in advance.
06-02-2011, 19:57
Martin Stružský
Hi, first of all, I want to thank you for this wonderful script! :-) However, I came accross an inconvenient bug. With the following configuration:
format: 'j.n.Y. H:i',
inputOutputFormat: 'j.n.Y H:i:s',
the script doesn't correctly recognize the input date and resolves this
17.1.2011 00:00:00
1.11.2011. 00:00
The date is OK when I save it, so it seemes to be the problem of the "input" part. It also doesn't matter how I change the displayed format, I just keep getting the 1 Nov 2011. I should add that this problem appears with the latest 1.3 version of Mootools…
06-02-2011, 20:08
Martin Stružský
The dot after year in the above example is of course a typo… Nevertheless, it doesn't change the behavior I described. :-)
07-02-2011, 14:08
I have an issue using this picker with the inputOutputFormat as "U". When I parse the Unix timestamp I am given in PHP, I see the "seconds" are taken from the current system time, rather than being zero.

This causes all sorts of problems when using times in calculations, or even just storing the values in the database in Y/m/d H:i:s format. You end up with entries like this:

01/01/2011 00:00:24
02/02/2011 00:00:38

Where the seconds have been taken from the system time, rather than being set to zero.
14-02-2011, 09:53
Great work, thanks!
17-02-2011, 00:39
How do I allow someone the option to manually type in dates without having to use the GUI datepicker?
18-02-2011, 22:11
Hi, your datepicker is great but i expermiment a problem.

I implement the datepicker and some inputs in <tds> and i want to clone all the line (<tr>). when the line is cloned datepicker won't work, how to reattach event to the new cloned element.

Nota : "cloneEvent" won't work as i want. onClick the cloned datepicker, the previous input is filled
24-02-2011, 09:43
nice lib, but with bugs!
an ugly bug for us who use format d.m.Y:

bug appers only if current month has less than 31 days and a date with day-number greater than max-day-number in current month is to be displayed. it displays inproperly - e.g. 31.1.2010 is displayed as 3.1.2010.

to correct:
add 2 lines in unformat function (after line 650 in original
js) to set d to january 1st:

unformat: function(t, format) {
var d = new Date();

also i've upgraded this library to colorize holidays, including easter monday. if someone is interested...
03-03-2011, 08:14
in case you'd like to use DatePicker with MooTools FX-Tween CSS3 (

Change line 319 (FX-Tween CSS3 allows short notated transitions; unit is obligatory in this case):
transition: Fx.Transitions.Quad.easeInOut
transition: "quad:out", unit: "px"

Change line 296 (FX-Tween CSS3 has problems with tweening to 0)
tween('left', -this.bodysize.x, 0);
tween('left', -this.bodysize.x, 1);
11-03-2011, 12:57
where can i get full files
21-03-2011, 07:40
One of the slicker and nicest looking pickers I've seen. However, right off the bat I'm looking for the ability to toggle enable/disable either past or future dates compared to the supplied date.

E.g. disable select past dates, for example when asking user to set an appointment date (not logical to set appointment for last week...).

E.g. disable select future dates, for example when asking user to select dates for running reports on data (not logical to set future dates as reports only process existing data).

I'm not too big a fan of the separate pick-date-first,-then-show-time style either, perhaps an option to show time below the calendar, like pretty much most other datetime pickers do?

I've only got those two issues, but not having them is a dealbreaker. It's a shame, would really have liked to support this as it's easily one of the best looking javascript datepickers I've seen.
25-03-2011, 09:16
Best datepicker around, thanks!

I'm trying to use it with MooTools 1.3, but since version 1.3 the Browser.Engine object is deprecated. So DatePicker errors on that instruction. Any news on an update for Moo 1.3? Thx!
14-04-2011, 15:54
when i use this class, i can't attach a personal function with event.
For Ex onkeyup="myfunction(event)"
my event is always undefined.

I sue the event to format the date when inserted manually. add backslashes ecc ecc.

There is a way to solve it?
15-04-2011, 08:50
Hey !

Thanks a lot for this incredible tool !!

Just a bug you can correct like this :

line 155:
item.set('value', clone.get('value'));

must be corrected like this :
value = this.unformat(clone.get('value'), this.options.format);
item.set('value', this.format(value, this.options.inputOutputFormat));

15-04-2011, 09:00
Sorry, like this for empty value :

if(clone.get('value') == ''){
item.set('value', '');
} else {
value = this.unformat(clone.get('value'), this.options.format);
item.set('value', this.format(value, this.options.inputOutputFormat));
20-04-2011, 15:30
Hi there,

I can't get it work, that only days in the future are selectable in the date picker. Can somebody please tel me if and if yes, how it is possible to make only dates from tomorrow onward selectable?
Your help would be highly appreciated.
Thanks in advance.

21-04-2011, 12:08
the datepicker does not seem to work in chrome?? any solutions
02-05-2011, 13:06
Thank you a lot, i searched many data picker, this is the best.
The time picker is a great idea !
thanks a lot
17-05-2011, 04:56
Chris Stringer
Just a quick note for folks who are struggling with having the default value appear to be there, but submit as an empty or null value when the form is submitted (I had the same issue). The key is to set the value of the form field that you are using for the datepicker to be value you want it to be initialized to.

In my case, I configured the DatePicker initially as shown below

var dp = new DatePicker('.start_date_picker', {format: 'm-d-Y', inputOutputFormat: 'Y-m-d', positionOffset: { x: 0, y: 5 }, minDate: {date: '<%= %>', format: 'Y-m-d'}, maxDate: {date: '<%= (( %>', format: 'Y-m-d'}});

It "appeared" to be working properly, initializing to today's date in the form. However, when you actually submit the form, it doesn't submit the field that you see, it submits another hidden field. You can see this by setting debug: true to in your options. I solved the problem by explicitly initializing the value to today's date in my actual form field like this:

<input id="lead_start_date" name="lead[start_date]" class='date start_date_picker' type="text" value="<%= %>">
30-05-2011, 05:57
Thanks for calendar! Its very nice!
I would like to donate, but dont have PayPal :(
16-06-2011, 12:07
Great script, but doesn't work in IE9 :(
05-07-2011, 08:21
First of all, thanks a lot for this plugin!
I try to use DatePicker inside SqueezeBox and I have some problems.
The container of date picker is below squeezebox. Is there an issue to fix this problem?

19-07-2011, 13:38
AWESOME! Thanks for this script! :-)
20-07-2011, 15:32
Great script. Thanks so much!

One question: I have been using this for more than a year with no problems. Now, within the past month or so, only for some of my visitors, the displayed day of the week is off by one day. For example, Oct 1 2011 is a Saturday, but the calendar shows it as being a Friday. I'm still trying to find out which browser those visitors were using. Could it be IE9?
11-08-2011, 19:07
Thanks for the script! Nice and lightweight just the way they should be.

One feature request: Some way to offset the time so the client side matches up with the server time input value.

12-08-2011, 12:22

Thank you for your excellent work. I just have a suggestion, can you please add a Day Off feature so nobody can select a specific day of a week, like myself as a restaurant owner, I do close my place every Tuesday and I use your Datepicker for my reservation form.

Thanks for reading and keep up the good work !

26-08-2011, 22:30
Find your documentation is really bad. Why not provide a complete working example instead of excerpts?
27-08-2011, 23:43
Awesome script,
working with joomla, crossbrowser without problems!!!

thank you for your work and time
30-08-2011, 13:20
please help me. how could i use the codes properly. are there other things i need to add and when i used the codes given by u it return this one :
window.addEvent('load', function() { new DatePicker('.demo_allow_empty', { pickerClass: 'datepicker_dashboard', allowEmpty: true }); }); Datepicker starting at and allowing no value: <with the textbox beside that code> what do i need to do? Thanks :)
20-09-2011, 18:01
Big thanks to Craig Vincent for your bug fix comment! I too was having the issue with minDate failing since I've included mootools Date class.
02-10-2011, 00:43
Ricardo G.
Great piece of code, thanks for sharing!
15-10-2011, 20:03
First of all, greate code.

Little contribution (based on rob comment on 18-11-2009, 08:03) for manual input and with date format dd/MM/YYYY, this modification allows:

.- Manual input with digit verification
.- On blur it validates the date, if invalid, then sets empty string

Alterations on are in method attach (for version 1.16).

Search for "clone.addEvents({" and replace with the following:

'blur': function() {
if (! new Date(clone.get('value')).isValid()) {
clone.set('value', '');
item.set('value', clone.get('value'));

Search again for "clone.addEvents({" and replace with the following:

'keydown': function(e) {
/*if (this.options.allowEmpty && (e.key == "delete" || e.key == "backspace")) {
item.set('value', '');'value', '');
this.close(null, true);
} else*/ if (e.key == "tab") {
this.close(null, true);
} else if (e.key == '0' || e.key == '1' || e.key == '2' || e.key == '3' || e.key == '4' || e.key == '5' ||
e.key == '6' || e.key == '7' || e.key == '8' || e.key == '9' || e.key == "backspace") {

if (e.key != "backspace") {
if (item.datepickerField.value.length == 0) {
if (!(e.key == '0' || e.key == '1' || e.key == '2' || e.key == '3')) {
} else if (item.datepickerField.value.length == 1) {
if (item.datepickerField.value == '3' && !(e.key == '0' || e.key == '1')) {
} else if (item.datepickerField.value == '0' && e.key == '0') {
} else if (item.datepickerField.value.length == 2) {
if (!(e.key == '0' || e.key == '1')) {
} else {
item.datepickerField.value += "/";
} else if (item.datepickerField.value.length == 4) {
var lastDigit = item.datepickerField.value.split('')[item.datepickerField.value.length - 1];
if (lastDigit == '0' && e.key == '0') {
} else if (lastDigit == '1' && !(e.key == '0' || e.key == '1' || e.key == '2')) {
} else if (item.datepickerField.value.length == 10) {

} else if (item.datepickerField.value.length == 5) {
item.datepickerField.value += "/";
} else {
if (item.datepickerField.value.length == 4 || item.datepickerField.value.length == 7) {
item.datepickerField.value = item.datepickerField.value.substring(0, item.datepickerField.value.length - 1);
} else {
'focus': function(e) {
this.onFocus(item, clone);
'keyup': function(e) {
this.input.set('value', this.visual.get('value'));

Sorry for the big code, but was the fasttest way to debug it. Hope can help you.
19-10-2011, 19:10
Hello all,

I do not know how I switch my datepicker in German, so that it enters by clicking the calendar German date format (d.m.Y) in the text box.
Can someone help me?

29-10-2011, 06:53
Thanks a lot to get a chance to get into your superb stuff. How to use it for my site?

Narendran .N
Tweet me @MyNaren89
02-11-2011, 19:05
The datepicker doesn't close it self why?
04-11-2011, 10:21
Excellent! Thanks so much for this!
04-11-2011, 22:06
Value doesn't change?
10-11-2011, 21:00
Okay I have the datepicker.js and datepicker.css files loaded on my server and they are embedded properly in my document.

I have the mootools core being referenced through the GoogleAPIs URL as follows:

<script type="text/javascript" src=""></script>

I use the JavaScript to call the new DatePicker() function.

I get nothing at all when I click into the form field that I need this specified on. What am I missing?
15-11-2011, 10:30
Hello, thats a wonderfull script, but i dont know how to do something.
When you declare a new datepicker with
var foo = new DatePicker(....
it puts a default date (today date) on the input.
If a user dont select another date, just let the default one, i cant get this date by javascript. If i try to get it with
$('idDate').value, this values is empty.
Is my fault or just a problem with the datepicker
Thanks in advance
24-11-2011, 05:41
I was having issues with browser capability and a few other bugs here and there. I switched to mootools 1.2.5 and it fixed all my issues. Don't use mootools 1.4.1 until they update datepicker.
02-12-2011, 04:37
Bomb script!!! Thank you for an awesome datepicker.

I have made a few minor functionality changes that allow for a bit more expansive control of the dp. I added in an option to assign an ID to the newly created form element at the time of initialization. This allowed me to access the values of one datepicker in order to modify another datepicker to restrict the date. This also allowed me to set the focus on a particular date picker after another had been completed. I found this very useful and required in order to use the script for checkin and checkout dates.

With a little math I was even able to tie the values back into a selected number of nights and when any of the 3 fields are changed they all are updated to reflect the new values.

I have been developing in php for years but have never been good with java. Thus I have had to rely on other's datepickers and this was by far the best javascript datepicker I have found.

Donation will follow shortly.

see my implementation at jacksonhole(dot)net. Live in the next day or 2
13-12-2011, 18:16
Great datetimepicker!

Me and my friend used this in our project, and since we're not that good in programming, this was really helpful!

We have a problem though, when we want to choose a date in December, we get a bug. Not in any other month, just December.

What happens is that we choose a date in the calendar, and then we're supposed to choose a time, but we have to click somewhere in the box before we can change the time, and when we click in the box, we "choose" another date even though the calendar isn't there. When we've done it, we can choose a time, but the time doesn't change from the current time in the form..

I'ts really hard to explain but I hope I made myself clear..
does anyone know how to fix this?
13-12-2011, 18:16
Great datetimepicker!

Me and my friend used this in our project, and since we're not that good in programming, this was really helpful!

We have a problem though, when we want to choose a date in December, we get a bug. Not in any other month, just December.

What happens is that we choose a date in the calendar, and then we're supposed to choose a time, but we have to click somewhere in the box before we can change the time, and when we click in the box, we "choose" another date even though the calendar isn't there. When we've done it, we can choose a time, but the time doesn't change from the current time in the form..

I'ts really hard to explain but I hope I made myself clear..
does anyone know how to fix this?
14-12-2011, 16:06
Very useful, thank you!
17-01-2012, 10:03
Tim Wong
This is wonderful date & time picker, but could it support 'pick' the second?
17-01-2012, 21:34
I really wanted to use this and not jQuery, but I couldn't get past the errors here (Browser.Engine is undefined (mentioned above) and DatePicker is not a constructor). I'm not fluent in javascript, so I couldn't fix it myself and I couldn't find a community that looked likely to fix it. Questions here don't seem to be answered directly.
If anyone can see my no doubt schoolboy error, do let me know.
I ended up here instead and hey, that worked.
26-01-2012, 07:51
Thanks a lot for this amazing plugin. Truly a great work.

I have one issue, and I would be thankful if you can help me out. I am trying to set the date after binding the input field to the plugin instance (after calling new DatePicker()). Apparently it is setting the date (when I click on the field I can see that the wanted date is highlighted), BUT the problem is that the input field's text doesn't change to reflect the new value which I am trying to set.

I thought about unbinding the field and the instance but I couldn't figure out how to do it. I thought about removing the input field then adding it again but then flickering will be ugly.

Plz, I would really appreciate your help on this.
27-01-2012, 08:14
Wonderful piece of code, my congratulations to the author. I wonder myself, is there a way to force timepicker to show 00:00 initialy, after you choose day, instead of current time.
For example, if you making some applications with date of birth, you don't know exact hour and minute when someone was born. So, it's better to offer "00:00" in such case. Any idea?
17-02-2012, 20:03
Marc Beach
Can this tool do 12 h time?
25-02-2012, 05:59
this looks great.
is it possible to set the minutes in 5 or 15 minute increments?
22-03-2012, 02:38
Just one word for it: Amazing.

Just replaced all my old date pickers for this one.
19-04-2012, 11:28
shereali sardar
Thanks man i was searching for this kind of datepickers.
23-04-2012, 17:25
Sometimes the datepicker calendar appears and immediately disappears. Its seems to be related to the browser wanting to show previous dates that have previously been input. Have you noticed this? (sometimes it show the previous dates and when it does the datepicker calendar disappears).

When the datepicker appears and disappears - the only way to get it back it to click off the input box and then click back on it.

Any ideas about what to do about these issues?

23-04-2012, 22:00

I did use the form "Toggle by Element" (as the example) and the the registry "input_date" appear as "1335217230" into database.

How to register "input_date" as "Abr 04 2012" or similar format into database?

Thanks for your help. (BTW great tool)
25-05-2012, 13:32
Great plugin, easy installation.

One problem: when you pick a date in the current month (Datepicker with timepicker) and then click in the hour or minute field, the selected date changes again. When you first pick a date in a different month than the current month, no problem occurs.
28-05-2012, 22:10

I try to put the mindate to datepicker ... whenever i click on it, the calendar not popping up and when i see the debugger (Chrome - developer tool), i got this error message:
Uncaught TypeError: Cannot call method 'toString' of undefined

as i saw other comments, it seems something going on t.toString() in unFormat function

Please advise
28-05-2012, 22:20
looks like Craig Vincent's code fix the mindate and maxdate issue, can i just use it?
09-06-2012, 06:30
Hey dude, this is very interesting date picker. I tried to implement in contact form but it is not working. Can u help me to implement this control. I am using wordpress and php, can u able to give, steps involved to implement the date picker.
21-06-2012, 21:09
Hi, this is the best webpage about datepickers, my favorite is vista.
I have an issue and i would like if somebody could help me,
i have a travel tamplate and it has a booking form, this is the code, is so simple:

<div class="form-value">
<div class="clearfix">
<p class="text-form"><label>Find flights near</label> <input class="inputbox" type="text" name="hotel" value="ex. Paris" size="18" alt="username" /><br /><span>City, airport, attraction</span></p>
<p class="text-form check"><label>Check-in:</label> <span><input class="inputbox" type="text" name="checkin" value="mm/dd/yy" size="18" alt="mm/dd/yy" /></span></p>
<p class="text-form check"><label>Check-out:</label> <span><input class="inputbox" type="text" name="checkout" value="mm/dd/yy" size="18" alt="mm/dd/yy" /></span></p>
<div class="clearfix">
<p class="text-form"><label>Room</label> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select></p>
<p class="text-form"><label>Adults:</label> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select><br /><span>18+ yrs.</span></p>
<p class="text-form"><label>Children:</label> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select><br /><span>1-17 yrs.</span></p>
<input class="button" type="submit" name="Find hotels" value="Find flights" /></div>

the problem is how to make work the fieds checkin and checkout with the vista datepicker, right know im usin you code and it works great in 1 field, but if you add another then it doen´t work.
Thanks in advance for any help.
21-06-2012, 23:27
hi, i fix it myself like this:

window.addEvent('domready', function(){

new Picker.Date('checkin', {
pickerClass: 'datepicker_vista'

new Picker.Date('checkout', {
pickerClass: 'datepicker_vista'


i was just easy, to ad a new, in this case 'checkout
Now im stuck with the minDate function,
1.-i can´t set it to choose from today and above(not yesterday o before) and:
2.-restringe user to pick a checkout date < than checkin date and viceverse.(checkin date > than checkout date)
3.-erase or clear date fields on reload
Thanks in advance for any help
22-06-2012, 15:28
John Brendle
I am using a generic Windows DOM setup...
window.addEvent('domready', function(){
new Picker.Date('calDatePick', {
pickerClass: 'datepicker_dashboard'

Works fine.

Decided to change over to an aspx page and the script was working fine unitl I added an ASP.Net UpdatePanel. Looks like this...
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<asp:TextBox ID="calDatePick" text="" size="10" runat="server" />

Still works fine when I remove the ScriptManager, UpdatePanel and ContentTemplate items. Figure I need to do some kind of an OnClick JavaScript call instead of a DOM event.

Can you tell me what it might be to fire the JS function?
27-06-2012, 12:02
I am having issues with GWT 1.7.1 datepicker. I have one form with text box to enter date as YYYY-MM. On 31st of May, if i enter 2012-04 in the field it shows an error in UI as "2012-04 is not a valid date. It must be in the format of YYYY-MM"
I think this occurs because April month doesnt have 31 days. How to resolve this issue?
Any help is much appreciated
27-06-2012, 12:18
I have overridden Datepicker's getValue method tp oick 1st as the day . But the problem still persists. Below is the code i have used.

public Date getValue() {
//Verify that the format is correct before returning the date.
// (The format could be 2010-0 and that is considered as a date,
// but it is not a valid format. So we hence return null)
if(!isRendered()) //If the component is not rendered, there is no raw value and we can hence not validate
return super.getValue();
if(super.getValue() != null && getRawValue().length() == Constants.DATE_FORMAT_YYYY_MM.length()) {
//Secure that the date is returned with the first day of the month e.g. 2010-12-01
DateWrapper dw = new DateWrapper(super.getValue());

dw = dw.addDays(1-dw.getDate());

return dw.asDate();
return null;
02-07-2012, 03:55
hi, i have a booking engine and it has 2 fields:
2.- "check-out"
What i want is to restringe the user to set a check-in date
> than check out date,
1-if user firs set a check-in date and a check-out date > than the first,

2-then the user goes back again to check-in field and set a date > than the previous check-out,

3.-then check-out date gets cleared
something like this:
Thanks so much in advance for any help.
02-08-2012, 12:08
Have similar problem to Angello. I need to have two fields. After setting check-in field in check-out field date must sets to check-in value + 1 day automatically.
Please help.
17-08-2012, 06:10
Your datepicker is good, but i think it is lacking one very important functionality. That is the fuction for selecting birth date. There should be an arrow that makes it easy to click to go direct to previous years.
22-08-2012, 06:35
We wanted more scipts notes related to datetime picker...
10-09-2012, 17:21

For the people that have the same problem like me:

The "Datepicker with timepicker" isn't completely compatible with "MooTools 1.4.5" so you need to download "MooTools 1.2.5".
01-10-2012, 16:02
I'm a database developer that dabbles in web pages. About once a week I search the Internet for code I can re-use. Today I'm looking for a way to pick dates in an html form instead of typing them in. I'm looking for simple, easy and understandable for me. I want you to know that this page is not simple and fast for me. There seems to be many mixed solutions all in one long essay. I know what I'm after is in here somewhere but I am not interested in reading the whole page and cut/paste out only what I need. I am passing on this one. Please, simplify.
27-10-2012, 06:01
Excuse me sir what if the previous date to disable? so that only the date of the next show.thank you
31-10-2012, 14:32
Hi sir

First of all I want to say good work with this javascript calendar. Works and looks great from the start.

I am hoping to use this calendar to jet another project.
I am wondering if there is a possibility to add on each day, special css class name and a title tag, as it will display as a tool tip when hovered over a day?

Thanks again for this awesome calendar.
16-02-2013, 18:49
20-02-2013, 18:10
I don't get it. But NONE of the Enabling/Disabling/Allowing/Restrict Range features work. :(
25-03-2013, 02:38
having a problem with this using motools? 1.4.5

I found this problem when i select a year and then when i select month hover event for month don't show. so i decided to change the tween of opacity to a display style you can copy and paste my code on fx: function(fx)

fx: function(fx) {
if (fx == 'right') {
this.oldContents.setStyles({'left': 0,'display': 'block'});
this.newContents.setStyles({'left': this.bodysize.x,'display': 'block'});
this.slider.setStyle('left', 0).tween('left', 0, -this.bodysize.x);
} else if (fx == 'left') {
this.oldContents.setStyles({'left': this.bodysize.x,'display': 'block'});
this.newContents.setStyles({'left': 0,'display': 'block'});
this.slider.setStyle('left', -this.bodysize.x).tween('left', -this.bodysize.x, 0);
} else if (fx == 'fade') {
this.slider.setStyle('left', 0);
this.oldContents.setStyles({'left': 0,'display': 'none'});
this.newContents.setStyles({'left': 0,'display': 'block'});
13-05-2013, 21:13
I had the same problem restricting dates with minDate and maxDate. The problem is that the format property on the min and maxDate object was not unset, so in the conditional at line 91 and 95, it will try to unformat the date again, giving an error. Replace the function named "formatMinMaxDates" with this one to solve the problem. Hope it helps someone.

formatMinMaxDates: function() {
if (this.options.minDate && this.options.minDate.format) {
this.options.minDate = this.unformat(, this.options.minDate.format);
this.options.minDate.format = false;
if (this.options.maxDate && this.options.maxDate.format) {
this.options.maxDate = this.unformat(, this.options.maxDate.format);
this.options.minDate.format = false;
16-08-2013, 12:27
I like those calendars so much!

The problem is I am new at this and I cannot make "Datepicker with timepicker" works.
I get a "ReferenceError: Can't find variable: Class" message and I am sure I am missing something implementing it but I do not find what could be.
I linked the ccs and js files, added the code you give but no way … :/

Can you help me?

Thanks a lot :)
25-10-2013, 09:33
this is awesome i like.
04-11-2013, 16:55
Thank for datapiker is great but a I have a question, I need that first show the grid of years, how do it?
19-11-2013, 09:02
Hi. Can you add 'this' parameter into onShow function, when you calling it?


23-11-2013, 08:17
Dharmendra Singh Rajput
I am getting an error 'Class' is Undefined datepicker.js Line 22. Please help me. Thanks in advance.
02-12-2013, 07:35
Mayank Jaiswal
I need to dynamic date picker which should be set by locale of different country. but it should picked locale from application not from browser.means if a user set locale from application (dutces) means in local indian local browser so it should show dutch in indian locale
13-12-2013, 13:37
Sometimes you can have a problem like following:
Youo pick date, automatically go to the time picker but it does not work (you can't scroll until you click in the hour/min field and doing so you just change the date again).

You can fix it by locating the '.time' selector in the css file and adding a z-index to it.
In my case it was "datepicker_vista.css":81

.datepicker_vista .time {
position: relative;
width: 100%;
height: 100%;
19-12-2013, 12:07
can we display the date picker on page load directly without toggle on any event.

Please see the below url for reference.
15-02-2014, 06:53
This is my code

<script language="javascript" type="text/javascript" src="<?php echo($this->baseUrl() . '/application/modules/Roads/externals/scripts/datepicker.js'); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo($this->baseUrl() . '/application/modules/Roads/externals/styles/datepicker.css'); ?>" />

<script type='text/javascript'>
window.addEvent('load', function() {
new DatePicker('.join_date', {
pickerClass: 'datepicker',
inputOutputFormat: 'd-m-Y',
minDate: { date: '10-03-2009', format: 'd-m-Y' },
maxDate: { date: '25-06-2009', format: 'd-m-Y' }
allowEmpty: true

but mindate/maxdate is not working.Why I dont know..