hi mate, do you miss me?? (:

i've found something wrong in this script: http://jsfiddle.net/7Gwxp/
try to click on the input, select a date and then scroll the mouse to select a time: it refreshes the form and (in this case) writes inside the overtext and the validation. When you select the time, it doesn't refresh overtext and the validator...

onestly i don't know where to put my hands: the first thing i've thought is "oh man, he doesn't put the e.stop() in the mousewheel action", nope, you're note the first coder on earth ^^"

here is it, hope not to be an impossible thing for you!! (:

cya!!

Currently we can only choose for a Day Picker, or with the timePickerOnly for times. It would be nice to have a option for just showing months or just years.

When working with datepicker, (which is great by the way),
I want to implement some logic after the date is picked.

You have implemented the onSelect event which is triggered. But: it does not have the element as an argument,
so you can't work with the element. I think it would be nice if you could pass the element(s) on which the select is triggered are passed along, so one can deal with it.

I found a weird bug which happens when i try to select a date in the month february (when its now late march). The setMonth(1) doesn't return february but march (i think this has to do with the order of setting parts of the date object in js. I found that changing the order to :
['seconds', 'minutes', 'hours', 'day', 'month', 'year'].each ... etc works better

this example code generates a march date without this new order:

var d = new Date();  //today is 30 march 2010
var values = {year:2009,month:1, day:8,hours:12,minutes:34,seconds:17};
    ['year', 'month', 'day', 'hours', 'minutes', 'seconds'].each(function(type) {

console.log('VALUE = '+type+' : '+values[type]);
var v = values[type];
if (!$chk(v)) return;
switch (type) {
case 'day':
console.log('set date to '+v);
d.set('date',v);

            break;
            case 'month': 

console.log('set month to '+v);
console.log('get month = '+d.get('month'));
d.setMonth(v);
console.log('get month = '+d.get('month'));
d.set('month',v);
console.log('get month = '+d.get('month'));
break;
case 'year': d.setFullYear(v); break;
case 'hours': d.setHours(v); break;
case 'minutes': d.setMinutes(v); break;
case 'seconds': d.setSeconds(v); break;
}
});
console.log(d);

but when setting the day before the month is set from the object the correct date is retrieved. (in this example you will see that after setting the month twice in the case it does go to february (really weird behaviour))

.. and here's the fix

Index: datepicker.js

--- datepicker.js (revision 433)
+++ datepicker.js (working copy)
@@ -568,6 +568,7 @@
date.setDate(d.day);
date.setMonth(d.month);
this.mode = 'time';

•                                           this.d = date;
                                          this.render('fade');
                                  } else {
                                          this.select(d);
  

Hello,

I think there is a little bug in the class in the version 1.16. In the function 'unformat', in the case 'j', I changed the pattern to this:

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

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

Ian

Maybe it's a good idea to manually fire the change event after the value is set to the element.
Now, no event is fired because the value is set by the script instead of changed by the user, which causes the event not to fire.

It would be nice if we had any way of either displaying multiple month or opening multiple datepicker next to each other, to visualize 2 or more month at the same time.
Any idea how to achieve this?

I've tried to update the version i'm using of DP (original 1.16, monkeyphysics) to your latest version. Seems like nothing works anymore.

I was unable to find the function "format" or to acces a Date object which would be linked to the DP. Also the value i used in the toggleElements option ('#something') throws an error.

So...

Do you have any "How to update from monkey physics version 1.16" document ?
Thanks :)

1.Click on the text box;
2.Please select any date;
3.Then click again on the same field without selecting the date on;
4.Now click the last time in the same field, and you will see that in
the space provided is another date, which differs from that in the
text box (ex: 6 September)

I tried to set the french language with mootools (MooTools.lang.setLanguage('fr-FR');), but there was a bug for the months titles, because some of the months include HTML encoding like é...To fix it, I just change something in the renderMonth function :

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

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

And in the renderTime function :

Old :
this.picker.getElement('.titleText').set('text', this.options.timePickerOnly ? this.options.selectTimeTitle : this.d.format('%d %B, %Y'));

New :
this.picker.getElement('.titleText').set('html', this.options.timePickerOnly ? this.options.selectTimeTitle : this.d.format('%d %B, %Y'));

why can't you choose inputOutputFormat like in the original?

Hey
I've been using DatePicker#select to change the value of the picker. Other than the fact that I'm not sure it's a part of the public API (it's not on the README), there is another issue - the picker identifies it's input on show. this means that if I use the method before the use has opened the picker, the input doesn't changes it's value. this is a real problem. I've manually set the input on my application, but I think there should be a better way of doing this. I don't mind attempting to create a patch if it helps

Hi Arian, I can't find any reference to submitting the form automatically on date chosen - if this is not possible I'd love it. If it is I'd love help on it :D

On the french locale file on line 14:

use_mouse_wheel: 'Utiliser la molette pour changer l\'heure rapiedment',

The last word is wrong: "rapiedment" need to be "rapidement"

Mootools Datepocker do not work in this two browsers.
It seems like work, bur after two or three times datepicker opens I get this error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
Timestamp: Tue, 26 Oct 2010 13:12:24 UTC

Message: Object doesn't support this property or method
Line: 328
Char: 37
Code: 0

URI: /datepicker.js

This is for 2.0.3 package:

I have 2 date text inputs with different date values, both set with a Picker.Date with { blockKeydown : false } option.

window.addEvent(
    'domready',
    function() {
        new Picker.Date($$(document.f.start_dt, document.f.end_dt), { blockKeydown : false });
    }
    );

Tabbing between these 2 inputs always shows the Date Picker with the first input's value.

I traced it to Picker.Attach.js not closing the Picker when blockKeydown is false and tab key is pressed. Pressing Esc key also doesn't close the Picker when blockKeydown is false.

This is my fix in Picker.Attach.js, not sure if it breaks anything else:

var closeEvent = function(event){
    if (self.options.blockKeydown && event.type == 'keydown' && !(['tab', 'esc'].contains(event.key))){
        event.preventDefault();
        return;
    }
    if (event.target.get('tag') == 'a') event.stop();
    if (!(event.type == 'keydown' && !self.options.blockKeydown) /* added this -> */ || (event.type == 'keydown' && ['tab', 'esc'].contains(event.key)) /* <- */){
        self.close();
    }
};

Btw, thanks to all who contributed to such a good widget library.

Maybe I just missed something but I see one problem with datepicker. User can't just paste own date or modify existing one. I think good example would be http://dojotoolkit.org/reference-guide/dijit/form/DateTextBox.html. When You click the input field calendar shows up but, on the other side, You could just click input once again and You're able to type own number. It is useful for quick modifications, especialy for year part of the date.

I noticed that positioning is getting a bit off when I use options.inject when creating the DatePicker. This is because the position of the DatePicker is still calculated relative to the body/window.

I suppose it can be easily fixed by changing line 178 in Picker.js:
var elementCoords = element.getCoordinates();
To something like:
var elementCoords = element.getCoordinates(this.options.inject || document.body);

Better support for dates with multiple input fields.

The attach stuff should be easier and there should be a way to set the current selected date manually with a method.

Hi Arian,
I have notice that clicking the 'Next' Arrow on the Datepicker from today's date Jan 30 it skip Feb and goes to March. From March, clicking the 'Previous' button does go to Feb as expected.

funnily enough it looks excactly the same a php's strtotime issue.

A feature request :)

Adding ability to specify minimum and maximum date ranges.

For example:

1. Specifying that endDate must be at least 3 days further than startDate. Picker will enforce constraint.
2. Specifying that endDate must be at most 5 weeks further than startDate. Picker will enforce constraint.
3. Specifying that startDate must fall between two certain dates. Picker will enforce constraint.
4. Specifying that endDate must fall between two certain dates. Picker will enforce constraint.

the comments say minDate and maxDate take a Date object or a string.

while this works perfectly for minDate: new Date('12/01/2010')

maxDate seems to ignore maxDate: new Date('29/12/2011')

but maxDate: '29/12/2011' works as expected.

after detaching and attaching again, datepicker doesn't show up anymore. fixed in http://github.com/eerne/mootools-datepicker/commit/f87b35bbcf8f106dd6236520641f16d122bf5f4a
please test :)

Picker.Date not working with MooTools Core 1.3.1 and MooTools More 1.3.1.1

Ex.:
/Test/index.html

Date Object as min/max date option:

on month "May 2011" - all dates are red and no button to back

Hi,

If you ever have the time to do this, what i really need is to be able to show the week number on the left of each week as a clickable column (default would load the first day of the week).

Thanks for your work, i was desperate for someone to continue the work of MonkeyPhysics !

Hi, I've used the widget in one of my WebApps, so I've prepared the italian Localization plugin.

Locale.define('it-IT', 'DatePicker', {
    select_a_time: 'Scegli un orario',
    use_mouse_wheel: 'Utilizza la rotellina del mouse per cambiare valore velocemente',
    time_confirm_button: 'OK'
});

Thanks for your plugin, it's very usefull!!

Daniele Corti

maxDate in some cases causes the previous month marker («) to disappear.

See http://www.mininova.org/misc/test-datepicker/ for an example.

Add an option to add functions that checks if a date can be selected.

For example:

myDatepicker.addBlock(function(date){
    return date.get('day') == 0;
});

then the Sundays are not selectable. Multiple functions can be added, so you can set certain constrains at different times. Obviously a removeBlock(fn) should be added as well.

Finally there will be a isBlocked(date) method which checks if a certain date is blocked.

The min and max date options might use this as well, although the datepicker still has to know when to display the previous and next buttons.

I needed a way to have the datepicker appear on dynamic or Ajax produced inputs or where the elements were not easy to specify with getElements(). Recalling attach would allow this to work :

-       this.attachTo = attachTo;   
        this.setOptions({
            days: MooTools.lang.get('Date', 'days'),
            months: MooTools.lang.get('Date', 'months'),
@@ -120,7 +119,7 @@
        });
        this.setOptions(options);
        
-       this.attach();      
+       this.attach(attachTo, this.options.toggleElements);     
        if (this.options.timePickerOnly) {
            this.options.timePicker = true;
            this.options.startView = 'time';
@@ -141,10 +140,16 @@
        }
    },
    
-   attach: function() {
+   attach: function(attachTo, toggleElements) {
+
+       //dont bother trying to attach when not set
+       if (!$chk(attachTo)) {
+           return;
+       }
+       
        // toggle the datepicker through a separate element?
-       if ($chk(this.options.toggleElements)) {
-           var togglers = $$(this.options.toggleElements);
+       if ($chk(toggleElements)) {
+           var togglers = $$(toggleElements);
            document.addEvents({
                'keydown': function(e) {
                    if (e.key == "tab") {
@@ -154,8 +159,20 @@
            });
        };
 
+       //see what is being attached and get an array suitable for it
+       var typeofAttach    = $type(attachTo);
+       
+       if ('element' == typeofAttach)
+       {
+           var elems   = [attachTo]; 
+       }
+       else //assume string or collection
+       {
+           var elems   = $$(attachTo);
+       }
+
        // attach functionality to the inputs       
-       document.getElements(this.attachTo).each(function(item, index) {
+       elems.each(function(item, index) {

Test

Formatted dates are not read correctly by the datepicker.

E.g. In the legacy test case, the JQuery input uses a formatted date: '%d.%m.%Y %H:%M:%S'. The DatePicker fails to read that format from the input in order to pre-select the relevant date in the picker when opened. (I have also seen this fail with various other date formats that differ from the default date format).

Can be reproduced from the legacy test case as follows:

1. Open this test in browser: https://github.com/arian/mootools-datepicker/blob/master/Test/legacy.html
2. Click inside "Datepicker with jQuery UI skin:" input to toggle the appearance of the datepicker.
3. Pick a date.
4. The formatted date appears correctly in the input control.
5. Click on the input again to toggle the appearance of the datepicker.
6. The input's (formatted) date is not restored/pre-selected in the datepicker. Instead, the picker default back to 1970 unix epoch due to null date being passed?

A feature request :)

The ability to combine two calendars in order to support a date range. Min and max date support included.

E.g. two calendars representing Arrival and Departure Dates. The first is arrival date, the second is departure date. The difference between the dates represent the range. Adjusting the arrival date control automatically adjusts the departure date control to enforce date validity.

E.g. see the "Multi-calendar support (with padding)" demo on http://www.electricprism.com/aeron/calendar/ .

The old MonkeyPhysics DatePicker was able to send standard Unix timestamps to the server as a result of user selection. This was very handy because it meant that you wouldn't have to parse it all over again with complex and/or slow functions such as strftime() or strtotime(); you could just check whether it's an integer with ctype_digit() and move on, after which you can add or subtract days or weeks from the date using simple integer arithmetic.

I tried using it with the new version, but the manual at http://mootools.net/docs/more/Native/Date implies that there is no way to do it any more, there is no % format string for it.

ie8 error:
Line: 328
Message: Object doesn't support this property or method
possible fix: replace frame.destroy() with Browser.ie ? frame.empty().dispose() : frame.destroy()

ie8 perpetual loading:
Line: 318
possible fix: replace javascript:false;document.write(""); with javascript:false;document.open();document.write("");document.close();

When attaching a date picker to multiple elements, the open/close behaviour becomes a bit wonky. When the widget is visible on one element end the user would try to open it on a second element it is also attached to without closing it, it jumps to the second element and immediately fades out. It would seem that the user meant to pick a date for the second element in stead of closing the picker.

Could you put up a demo of the availableDates option? I just tried the code from your own example and it doesn't work. I can still select any date within the min/max date time.

new Picker.Date('myInput3', {
            pickerClass: 'datepicker_vista',
            format: '%Y-%m-%d',
            startView: 'days',
            yearPicker: false,
            minDate: '2011-1-19',
            maxDate: '2011-3-24',
            availableDates: {
                2011: {
                    1: [19, 29, 31],
                    2: [14],
                    3: [5, 19, 24]
                }
            }
        });

@monkeyphysics, Arian Stolwijk, MadmanMonty (Chris Baxter), marfillaster (Ken Marfilla)

Currently mootools-datepicker is under Attribution-Share Alike 3.0 Unported
http://creativecommons.org/licenses/by-sa/3.0/

This says "If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one."

Any objections if we change to at least GPL, or even better MIT ?

The reason is that months_abbr and days_abbr in some MooTools locales don't necessarily contain month or weekday names, that make sense when applied to datepicker.

I can think of 2 ways of fixing this:

1. In an ideal case, define these names in Locale.xx-xx.Datepicker.js with fall back to values of Locale.xx-xx.Date.js (I'm not sure, how easy would be to implement that)
2. Pass those with the options object with fall back to Locale values.

I can tell of 2 languages, where months abbreviations aren't normally used at all, and the months in month_abbr were translated to be used in the long date format. In fact, one of these languages now has 'artificial' abbreviations, that are understandable, but not natural to the eye (but fit in for the usage in the calendar), and another has them inflected, rather than abbreviated, so they look natural when used in long date format (but they seem very unnatural in the calendar this way). Both of those languages I speak of use day abbreviations though, but some other languages could very well suffer from similar issue with weekday names.

I saw Madfarmer already opened this issue, which is sadly closed...

The original datePicker from MonkeyPhysics provided with inputOutputFormat() 2 dates :

• The one displayed to the user (depending on the localized format)
• The one stored by the input, which was suposed to be send to a server.

This supposes the Datepicker creates a display input and hides the form named input when it instanciates.

Nice to have the localized languages, but we should also have a "ready to save" output date.

Basically add/change some CSS and fix the background images so all themes work with the multiple columns.

Allow pickerClass to assign multiple classes (eg. via array) as alternative so themes don't need to redefine the whole stylesheet but can just overwrite the stuff they need via .datepicker.customClass selector

Sorry i don't know where to post:
can you provide an UNavailableDates-Function to?
I think thats the normal behaviour of a calender ...

The old MonkeyPhysics DatePicker had a useful feature - you could tell it to display one format of dates, while sending another to the server. That was useful for example when we showed the local date format, e.g. "13. 8. 2010." (or whatever), while a common format was being sent to the server, e.g. 2010-08-13 (or even better 1281650400). That way the local users can see their native form, while the server keeps parsing the same format all the time with no fuss.

The changelog indicates that formats can no longer be specified, which includes inputOutputFormat, but it doesn't provide a rationale for this. Perhaps the format parameter was too complex as a default? Can it be restored as an optional feature, please?

Hi There,

I had to use monkeyphysics's version as this one would not honor any date selections when the timePicker is set to True. It would always default to current date.

hi,

Thanks by your work!

I see a typo in line 144:
if(!(this.options.maxnDate instanceof Date)) this.options.maxDate = Date.parse(this.options.maxDate);
should be:
if(!(this.options.maxDate instanceof Date)) this.options.maxDate = Date.parse(this.options.maxDate);

maxnDate => maxDate

And in line 256 and 258 there is an assignement that is wrong, if you do
this.d = this.options.maxDate, then when you change this.d, you are changing this.options.maxDate, the assignements of these lines should be:
this.d = this.options.maxDate.clone();
this.d = this.options.minDate.clone();

Thnaks!

Add the ARIA stuff for better accessibility support.

I don't know much about it though so I need some help with this :)

Hi Arian,
I have a need to not select dates but months and years only - is it possible to NOT show the days view?