Javascript datepicker Calender Eightysix released

Where ist the Download Link?

Here

glad to see some requested features added like min and max date .. nice nice .. will comment when i upgrade to this version..

heatly thanks for all the time and effor you put into this version

ehab

Great in theory but:

Whatever I do, I'm getting:

Date.defineParser is not a function

under Moo 1.2.3 (including all dependencies)

Also, the script completely fails on 1.2.4.

this.target is null

Date.defineParser is a function from the MooTools More library, and should work just fine.
My guess is that you didn't include the nessesary MooTools More dependencies.

Calender Eightysix has been developed for MooTools 1.2.3, and will soon have 1.2.4 compatibility.

Tested compatibly with MooTools 1.2.4 as well. Works like a charm.

Oskar Krawczyk, my guess is that you are using it wrong. Try the provided examples in the download.

I must say that I really like your calendar script.

However, I am stuck.

I am trying to use the calendar for two input fields in the same form

The first field is the arrival date and the second field is the departure date

When someone selects a date in the arrival date field, and then clicks in the departure date field, then the initial date in the departure popup calendar should be AFTER the previously selected arrival date, and it should not be possible to select a date that is before the arrival date.

Is this possible with your calendar?

Quite easy. It's something like this (made the example by heart, didn't test it):

var calendarA = new CalendarEightysix('calendarA', { 'pickFunction': function(date) { calendarB.options.minDate = date; calendarB.render(); } });
var calendarB = new CalendarEightysix('calendarB');

Hey guys,

Great calendar, i'm using it in a intranet site, and i'm tryin to set a date field to none date, so I need a field with your calendar but without any date filled, and if the user don't pick the calendar, the field remain empty. It is possible with you script?

Thanks,

Hey,

I've solve the problem, I've used 'prefill': false in the options array,

Thanks anyway,

Great calendar script

I love the Calendar script, but I am a little stuck. When I attempt an edit an item in my DB, I want my value from within the DB to appear in the date input field box with the calendar selection. However, if I add a value=$blah it won't load the calendar on this input field and only display the stored date from the DB.

It should take the value from the input textbox (if written to the html from the start) and, with the option linkWithInput set to true, should parse this to the initial date.
You can try to set the defaultDate as well. See the documentation; the options and parsing chapters.

Very nice tool, but I have encountered a few issues that are preventing me from using it.
1) When you blank out a date in the text box, the calendar then defaults to December 31, 1969. Wouldn\'t the current date be a better choice?
2) I like the hidden field concept, but it appears to work only when the script creates the field. It does so with out defining an ID, only name. If createHiddenInput = false but hiddenInputName is defined, it should still populate the field in my view.

I welcome your thoughts.
Jeff

Hi Jeffrey,

About your thoughts:
1) Totally agree . Good feature for the next release.
2) createHiddenInput is just an extra feature for ppl that want the date in another way then that it is shown. Only the name field can be changed because in my opinion id is not needed. If you do want extra functionality besides the createHiddenInput function you can either use a custom pickfunction or can always gain access to the hidden field with $$('input[name="name"]').

Hi,

Thanks for your great script :)
I\'d like to use it on several commercial projects (so i\'ll pay for commercial license) and I ran some tests before icluding it on my projects.
I found a bug linked to localization (reproduced on Firefox and Safari for Mac). I can\'t find the origin and I can\'t say if it\'s a Calender Eightysix bug, a Mootools bug or something wrong on my side.
Could you have a look to this test page : http://labs.adaptools.net/calendar-bug/
All instructions to reproduce the bug are on the page.
Manu

When I try to implement this, I got the following error...

Error: element is null
Source File: http://***********/js/mootools-1.2.3-core.js
Line: 1596

and it doesn't work. Anyone have any idea?

Nice calendar. You should put comments in the source code. Let's say i want to change date; it was difficult to find the right way.

c_from.selectedDate = new Date(2003,01,01);c_from.pick();

And my code above does not work

Many thanks, its working great.

Just released version 1.0.1 which fixes both bugs:

and Extra functionality for easy date changing has been added as well Senayi.

See the script page for the new version and updated documentation .

Wow! Let me start by saying that this date picker surpasses all the others I've come across in looks and usability. It worked perfectly and you've done a great job. Thank you for sharing this. Only thing I've seen elsewhere which would be a nice feature in the future was date range selecting between 2 calendars. (google analytics date picker for example).Thanks again.

@John, my best guess is that the script is unable to find one of your elements. Make sure the id is set properly on any elements your using with the calendar with and that you are passing the id's value to the calendar class.

Small issue here, I have a mindate set for the 18th of nov, and max set for the 9th of dec, but no arrow is available to move forward to december. can click the greyed 9 though, and can switch to month view, click december, click back to november, but again not forward to december.

Firgured out a quick solution to my issue.. on line 179 in the renderMonth method after emptying the container I inserted "this.currentContainer.store('month', this.viewDate.format('%m'));" to store the months id using mootools element store capabilities.. then only line 317 using mootools retrieve added "&& (this.currentContainer.retrieve('month')==this.format(this.options.maxDate, '%m'))" before the timestamp comparison. Can now move forward into december as expected.

Thx :) I'm going to try it tomorrow :)

Hello, I just wanted to let you know about another free calendar control that is easy-to-customize and works as a date picker, time picker or both date/time picker! Learn more at http://www.ama3.com/anytime/ and feel free to contact me directly with any questions or constructive criticism.

hi,
Sorry i try to use it in my intranet application but it does'nt work ):

i have the same motool core and more files and i have this error

this.target is null

how i can resolved that?

Ps : i'm french sorry for my english :$

Did you provide the first argument?
It should be the ID of an element, preferbly an input text element.

new CalendarEightysix('inputElement');

See the documentation, or provided examples in the download for correct uses.

I need to call a javascript function that takes a date object and determines when a traffic fine is due, taking into account weekends and company holidays. I'm having trouble doing this with the pickFunction option. Can you provide more detail on how to call a function and pass it the date selected on the calendar?

Bug.. I think I've found another bug.. I'm using the new v1.0.1 release with the LinkWithInput fix. However, the calendar's display is still NOT changing when the input field when manually modified either by the user or by a php $blah variable. Inside the javascript for my calender, I have

'format': '%d-%m-%Y',

. My input field reads dd-mm-yyyy. However when I change my day, or month or year manually, the calender is not self updating the display with it's results. But if I type the date in backwards in the input field yyyy-mm-dd it is updating the calendar display accordingly even though I have specified the date format to be %d-%m-%Y.. Any answer?

Hi Julian. This is no bug. The formatting doens't have anything to do with the parsing. If you change the date manually it will parse the value from the input to a date. This will use the Lang localization feature of Mootools. The standard is set to en-US which has m-d-y parsing. See the Localization chapter of the documentation. Try setting the date order correctly.

Hi, I have added the following into the javascript area directly below the closing comment that contains my calendar and configuration.

        MooTools.lang.set('en-GB', 'Date', {         months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],         days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],         dateOrder: ['date', 'month', 'year', '-']         });         MooTools.lang.setLanguage('en-GB');

However, it still will not change the calendar's displayed date when I manually modify or pull data from a php variable.

Example, even when using the above code, my date in the input field will show 20-11-2009. When I try to manually change this to 19-11-2009, it's not changing the display of the calendar at all and the calendar is still just showing the 20-11-2009. Again, if I remove the data in the input field and put in 2009-11-19, it will change it on the calendar.

Even on the given example.html within the download pack of v1.0.1.. the first calendar Example I does the same thing.. click on the localization date formatting down bottom to nl-NL.. Now go manually change the date of the first example calendar.. Does the same on that.. Date format is showing DD-MM-YYYY, but when you change the day or change the month or the year in that format, the calendar isn't changing with it..

Sorry rcz, I do not mean to spam, but this is what I just noticed.. when my date format is set to %d-%m-%Y, the calendar display will not change upon manual change of the input field.. But if I change it to %d/%m/%Y it will then work and the calendar display will change according to manual user entry or a php $ variable. Just simply won't work when a Hyphen - is used as a separator :( Can this be fixed?

Great stuff RCZ!

For the localization, we need to turn to the mootools stuff.

To achieve what Julian Krys mentions.
I use:
MooTools.lang.set('da-DK', 'Date', {
months: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
days: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
dateOrder: ['date', 'month', 'year', '-']
});
MooTools.lang.setLanguage('da-DK');

AND

Date.defineParser('%d-%m-%Y');

Before calling the new CalendarEightysix

Best Regards\\MaxEmil

Problems arise when JQuery is included in the page with Mootools. Different errors arise when either the compressed or the standard version of the js is used. The example.html does not seem to work either.

According to FireBug:
(example.html) window.addEvent is not a function
l is null
[Break on this error] }},after:function(m,l){if(!l.parentNode)...,bottom:function(m,l){l.appendChild(m);\n

The calendar works great when JQuery is commented out.

Great work though. Love the design. Cheers.

Hey guys,
kudos for the calendar, now, I don\'t know if this is the expected behavior but when you assign the pickFunction option inside the constructor, the function gets called. This would not be normal since, say the variable that holds the calendar and apparently being used in that function would be null or undefined since it has not been assigned the \"calendar\" object instance.
That would happen if you want to control 2 calendars according to their date.
A workaround is to instantiate the calendars and then do for both (i.e.):
cal_a.options.pickFunction = function(d){ // adjust_dates };

Hi,

What is the code to show the calendar after the dom is ready. I do not want to use it as a date picker of an input. I want to show off the calendar.

Also, how do I set and array of Dates to be clicked and other class name?

Thanks.

I was seeking something like Example V of Vista Calendar: http://dev.base86.com/app/pages/scripts/vista-like_ajax_calendar_version_2/

And I would like to have some dates to use different class style and be clicked to some link ID....

I was seeking something like Example V of Vista Calendar: http://dev.base86.com/app/pages/scripts/vista-like_ajax_calendar_version_2/

And I would like to have some dates to use different class style and be clicked to some link ID....

I can open the calendar.. I just can't set an array of dates to display in the calender using another style and be clickable...

also, I'm stuck with the calendar Allways open.. How can I close or hide the calender via mootools javascript??

Thanks in advance.

I'm using this:
$$('.calendar-eightysix').each(function(el, i){

el.dispose();

});

Now.. All I need is to set an Array of Dates to display in the Calendar.. Any help?!

Thanks.

I am interested in purchasing this product if I can figure out how to just select a month?
I don't need to know or deal with the days and it would be a confusing step for my users.
Cheers.

I can confirm what Leslie in comment 35 has said regarding the inclusion of jQuery.

If you have anything else on the page that needs jQuery the Calendar will not work, however should jQuery be removed everything works fine.

Various different errors occur when trying the current versions of MooTools and jQuery and also some backdated versions

However, love the Calendar ! and it would be great if a fix for this could be found.

It's great calendar picker. Is there a way that I can input the time too ? :D

Regarding the inclusion of two Javascript frameworks: this is not done, and will never be supported. You won't ride with two bicycles on a road would you ?

Time-picking will be a feature in the next release.

I noticed that the rendering of the calendar is slightly off in IE8. Are there plans for supporting IE8 in the near future?

Hello !
excellent script , but i noticed a bug in IE6 (XPSP2) The arrows doesnt show .... can it be fixed ?

I fixed a bug with the visibility of the left/right arrows when the min/max dates were outside the current calendar setting but inside the constraints of the current container. For example, set the maxDate to Dec 3, 2009, then go to November 2009 (arrow will be missing).

I also updated the code to add Today and None options in.

If anyone is interested in the code, email me. Thanks...

how i can use this calendar with
innerHTML Like this....

<--! This 's the page which in iframe (iframe style="display:none;") ,and innerHTML to main page in index.php at div tag -->

<script language="JavaScript" type="text/JavaScript">
function load_content () {
if (parent.document.getElementById('main_div')) {
parent.document.getElementById('main_div').innerHTML=document.getElementById('inner_frame').innerHTML;
}
if (!parent.document.getElementById('main_div')) {
window.location=('index.php') ;
}
}
</script>
<body onload="load_content()">
<div id="inner_frame">
<table cellpadding="0">

<tr>
<th>Example III</th>
<td>
<input id="exampleIII" name="dateIII" type="text" maxlength="10" style="padding-right: 22px;" />
<div class="picker inElement" id="exampleIII-picker"></div>
</td>
</tr>
</table>
</div>
</body>

A Problem is ....
In iframe it work good
But in main div which innerHTML from Above Script ,It does not working.

Sorry About My English.
Any one help me.

This calendar works with AJAX? I've tried several ways and I do not work, saludos

Hello!

First of all, congratulate you on your calendar!

I have a question however, is not programmed with jQuery?

Your CSS class names conflicts with mine. I had to edit your code to rename your classes from generics such as "header" to "calheader".

It's best you rename all your css classes with unique names to your calendar app, or conflicts will continue to arise.

Hi Jeff!

Thank you for your great Job.

Now i have a question (or problem maybe).

For the hidden field this datepicker created, when the user give or select a date and submit, will the value in this hidden field or on that visible input field be submitted?

This is important because i need to do something with date localization. That means the user can input date in localized format of his language, but when he submits, always only 'standard' format (that i defined for hidden field, i.e. YYYY-MM-DD) should be submitted. So i can just easily save it in database.

But so far i've tested, both value in hidden and visible field will be submitted, is ok, but wouldn't it be nice if only the value in hidden field is submitted and make our server backend think this value come from a normal visible field?

I have a big problem to change to date..?

Under Functions i found this source...

var calendar = new CalendarEightysix('e_date');
calendar.setDate('01.01.2000');

But it doenst work ?

How can i change the date..?
Does anybody can help me?

Thanks a lot!

I found antoher problem...
if i change prefill attribute to false

there will be a crazy default value

01.01.1970 <-- ?

is there antoher option i blank the form field @ start?

Hello,
I think this calendar is great. However, for me I am getting this error: \"this.target is null\" when the page has a MasterPage.
Otherwise the calendar work just fine on a page without MasterPage. What am I missing

Hi
This is a great calendar, thanks.

I have found one problem with Example IX when using drop downs. When I update the drop downs and then click on the calendar, the date is not updated to the new ones selected on the drop down.

In IE6, on the page where I use this, the browser CRASHES, when you change the url (go to another page or submit the form). Anybody else running into this? (Yes, I have a situation where I actually HAVE to use the dreaded IE6 - not by choice).

Hello,

We will like to use this for our commercial product and would like to purchase this. Before we can buy this, I would like to know if it supports the below features.

1) Can it just act like a month picker instead of showing the dates? We would like to use this to pass parameters to a monthly report

2) Is there a way to disable any future dates or months?

Your response will be greatly appreciated.

Thanks,
Sreekanth

Hello,

i found this great calendar and be very happy for that. Only one problem for me.

On the formular i will show the date in format : %d.%m.%Y and the output, if the user is pressing "send", should be in format %t.
How can i ge this work? Is it possible?
Can anyone help me?

1) This is currently being developed in the new version.
2) Yes. Set maxDate to 'today'.

You can create a hidden input element with createHiddenInput = true. This can contain a different format you will need, invisible for the user. See datepicker_calendar_eightysix.html#options

No. However a jQuery version will be developed in the near future.

When do you add this amazing plugin to the MooTools Forge. Then it would be even more amazing

It's on my big to-do-list

Hi, first of all, thx for scaring this with us. I love the calendar.

There is just one problem that I have found:

If you change: ('maxDate': null,) -> ('maxDate': 'today',)

Then you will not be allowed to go forward again, if the pick a day before: 2000.

How can that be? And what can I do to change this failure?

One suggestion which i implemented myself into your latest release is to transport the Calendar-Object itself by the pickFunction.

I just replaced "this.selectedDate" with "this"

this.options.pickFunction(this);

and within the pickFunction itself i can reference to all of the functions to have more options to work with.

As i #56 - is it possible to have a blank field - and how?

This looks fantastic!

Is there a way to make a certain set of dates selectable? Anotherwords, I would like to have more precision that minDate/maxDate.

Thanks!

#66

Where do you replaced this? I have't found any place in the code where it says anything about:

\"this.selectedDate\" - or - this.options.pickFunction(this);

?? :)

"var calendarA = new CalendarEightysix('calendarA', { 'pickFunction': function(date) { calendarB.options.minDate = date; calendarB.render(); } });
var calendarB = new CalendarEightysix('calendarB');" - I can't get this code to work, can anyone help me?

Hi, I have the same problem. I have just found out something to do:

var calendarA = new CalendarEightysix('calendarA', { 'minDate': 'today', 'pickFunction': function(date) { calendarB.options.minDate = date; calendarB.render(); } }); 			var calendarB = new CalendarEightysix('calendarB', { 'pickFunction': function(date) { calendarA.options.maxDate = date; calendarA.render(); } });         });

The only problem I have, is that I can't inset following, without the code crash!!

'prefill': 'null'

Can anyone help me?

var miDate = new Date(2010,01,01);
var calendar = new CalendarEightysix('calendar', { 'theme': 'default red', 'startMonday': true, 'format': '%d-%m-%Y', 'minDate': 'today', 'defaultDate': miDate, 'slideTransition': Fx.Transitions.Back.easeOut, 'draggable': true, 'offsetY': -4 , 'disallowUserInput' : true, 'toggler': 'calendar-picker'});

Hi there! Thanks for great stuff. Sorry for annoying, but it means stuff is REALLY useful or otherwise there wouldn't be any comments :)

But I have problem too, please help :(

var calendarS = new CalendarEightysix('t_start', { 'startMonday':'true', 'defaultView': 'year', 'format': '%d/%m/%Y' }); 

.......
//somewhere in onClick:
calendarS.setDate('06/05/2001');

It don't work for me completely.
I tried with/without 'format', MooTools.lang.set (..... dateOrder: ['date', 'month', 'year', '/']), and wonder what I have to do?

First impression: This is a very well designed calendar. Will have a look into its funcionality now. Cheers.

Really great calendar!
It works really good for me, thanks!

I had been used the previos version. It was very good. I am using the new version now. It also very good. Thanks a lot.

Hi, I have a problem using this calender. I need a way to define the default location to right beside the text box, as right now, the calender is appearing all over the place, and 1 unique place for each browser (so a simple offset does not work). I am thinking about doing a browser detect, but not really sure where the best place and the best way to make the change. (Just a side note, I haven't worked with javascript before)

An update to my problem from above, it seems the reason for it acting wierd is because it tries to auto center on the page. Therefore the calender moves as my browser's size change. Can anyone help me remove this feature (from css I'm guessing, but can't seem to find the "margin:auto" code)

By the way, this is a great program, and will work even better if I can get this problem out of the way. Thank you

How can i create the calendar object after this event? window.addEvent('domready'
i want to create a input with javascript and use the Calendar without reload the page.
thanks!

Sorry for basic question but have the same needs as "Pasci" above. That is to force the second calendar (called "departure") to select only from dates later than the first calendar (called "arrival").

I saw the suggested solution but am a newbie and don't know how or where to implement this.

Any help would be appreciated.