About Using the Date Picker in CFV4 RC2.0

Hi Bob,
Thanks for this. I just wanted to note that you have to comment out the next function (loadSSValidation) as well because that is in the replacement code.
Also I am using the startView as Decades, and there is only pagination one way. If you bypass the year you are looking for there doesn't seem a way to go back a page. Even if you select a wrong date and try to edit the field again, the years page starts where you left off with no way to go back to later years.
Any help on this is greatly appreciated.

Thanks,
Apryl

Hi apryl,

Oops, sorry, nothing has changed in the loadSSValidation() function, I just copied and pasted it it by mistake; I've fixed my earlier post.

I'll take a look at the decades - still finding my way round this . . .

Bob

Hi apryl,

I've tried startView: 'decades'* and startView: 'years' and both appear to work OK from here.

Do you have any other settings in the DateTime Picker config box?

Bob

*I don't see 'decades' in the docs so it may be deprecated - 'years' appears to give the same result.

Thanks Bob,
'years' works fine. I just have a minor problem with the datepicker. There is only one pagination arrow and if the user passes the page with the correct year, there is no way to "page back" to the correct set of years. Also you cannot manually edit the date in the box, and if you want to change it, the date picker only lists the years of that decade or earlier.

For instance I click the field and the date picker starts out with 2000-2019 and I can click the left arrow to go to years 1980-1999. But if I want to go back and pick 2004 there is no right arrow to get back.

If I can't change any of this, is there a way to clear the entry in the field so the datepicker can be started over again?

Thank you,
apryl

Hi Apryl,

I have no problem in going backwards or forwards with the years display - both buttons work OK. The only time I don't see them is if I have a minDate set, then I can't go back before that.

Do you have any other settings in the DateTime Picker config box?

Bob

Hi Bob,
Thank you for your reply. The settings in my config box are
"startView: 'years', minDate: '1930-1-01', maxDate: '2011-12-01'"

I took a closer look and it seems that both arrows are there, but one is displaying out of view to the right of the page.
[attachment=0]datepicker.jpg[/attachment]

Do you have any idea how I can fix this?

Your help is always appreciated,
apryl

Hi apryl,

That looks more like a CSS problem . . . Please post a link to the form so I can take a quick look.

Bob

Hi,
I tried uncommenting the different css styles on the datepicker to see if anything changed, but they all give the same result.
I have tried it on different forms but the same problem exists. Here is a link to a simple form on my site where I have put a datepicker.

Thanks,
apryl

Hi apryl,

Your template CSS is setting the with of the .header div in the datepicker to 975px.

Please edit the datapicker css files to include the width:auto; line in this block (around line 15):

.datepicker_vista .header {
    height: 15px;
    margin-bottom: 5px;
    padding-top: 1px;
    position: relative;
    width: auto; /* << add this line */
}

Bob

PS The code causing the problem is

.path, .upper, .footer_wrap, .header {
    width: 957px;
}

Great! I was able to add that to my css files. It took me a second to figure out that I had two sets of css files and the ones the code calls are in the js folder, not the css folder. Setting the width value to auto fixed the title but the arrows were still off, and I was able to change the value of

.datepicker_vista .header .previous {
	left: 40px;

from 4 to 40 and also for the .next button as well.

Thanks again it is now working and looks like its supposed to. 😀
Apryl

Now to see if I can work out calculating dob and passing to my age field.

Hello, i have the following reservation form
http://www.iris-hotel.gr/preview/index.php?lang=en

If you try to click at Check-In-Date, nothing will happen.
I am using the latest ChronoForm Component (4.0 RC3.21) and Joomla 2.5.1

As i checked at components/com_chronoforms/js/ there is an extra datepicker_moo directory, that i assume that it is there because of the RC3.21 version.

Do i have any problem with javascript or mooTools ?

Any idea will be appreciated!
Thank you

Edit: I have chosen Mootools Datepicker with no success

Hi Perang,

Please turn off the z-tools script compressor which is doing some weird things to the scripts on your site.

Bob

Hi Bob,

i cannot disable the ztools plugin beacuse the whole website needs it.

I have in template menu an option to Optimize JS, CSS, HTML. I choose No, but same result...

Hi Perarg,

You need at least to fix the error "JCaption is not defined: new JCaption('img.caption');" - I suspect that the compressor ifs the cause :-(

Note: this is not an error related to ChronoForms but it does appear to be breaking the scripts on the page.

Bob

Hi Bob,

i have corrected the error with JCaption, as i read it is a general bug of Joomla 2.5.1 but nothing has changed...

Hi Perarg,

I see that it's working OK with the standard Joomla! template - the missing title and dates are because there is black text on a black background.

Bob

Hi Bob,

yes, indeed. But i am thinking that zt tools plugin is enabled in spite of loading the standard Joomla template. So i think that the problem comes from template intergated with zt tools and not the zt tools itselfs... That is a real pain in the neck...

Hello again,

i solved the issue, just using z-index in DatePicker css class.

But i have another issue. I choose as DatePicker Type the MooTools as i use Joomla 2.5.1 and JQUI as style but i think it loads the default DatePicker type (that with Monkeys 😲 ).

The same thing happens when i use the default Jooomla template (Beez). I suppose that this is not template issue...

One more time the link is http://www.iris-hotel.gr/preview/index.php?lang=en

thank you

Hi Perarg,

Hard to see what has happened. I tooks as though you have updated to CFv4 RC3.2 - which now uses the MooTools DatePicker but still have the previous mod in place and so you are loading two copies of the DatePicker.

Bob

Hello again Bob,

look what i get now.

i set up a text box with a class name. I loaded a Custom Mootools Datepicker and all set it up perfectly. I added at Extra options extension the line

minDate:{ date: '10-03-2012', format: 'd-m-Y' }

And now i get a blank box as date box and the following error from firebug:

options.minDate.clearTime is not a function
[Break On This Error]
options.minDate.clearTime();
( at file Picker.Date.js (line 94) )

any idea of what may be happened ?

the formats are different with the "Mootools" picker, try using: %d-%m-%Y

Regards,
Max

Hi,

same error although using

minDate:{date:'10-03-2012',format:'%d-%m-%Y'} 

...
the problem seems to be with minDate parameter. If i use for axample

startView: 'decades' 

it works with no problem...

Hi Perarg,

With the MooTools Datepicker the syntax is different. This works for me, not elegant but it's OK

minDate: new Date(2012,2,10) 

Note!!! the months start from 0 so March is 2 !!!

Bob

Thank you all very much 😀

Hi GreyHead,
i've a problem with the datepicker. The calendar does not appear when i click on the field. I use joomla 1.7 and CFV4 RC 3.3.
I saw a lot of topic on this problem but i haven't found any solution.
So i decided to follow your advice and to use MooTools-DatePicker that you have presented here:
http://chronoengine.com/forums.html?cont=posts&p=106349#p106349

I have followed the 2 step to install the MooTools-DatePicker but the date is not working.

I have a form with only a datatime picker field and i have 4 events:
Load JS
Load CSS
Custom Datepicker
Show Html.

I note that, after create the form, if i click on test form the MooTools-DatePicker works , that is the calendar appears correctly.
Instead, if i click on Frontend view the MooTools-DatePicker doesn't work, that is the calendar doesn't appear correctly.

If i insert in Load JS jQuery.noConflict(); it doesn't work both in test form and Frontend view.
Can you give me any suggest?
Thanks very much.

You developed a wonderful product.
Regards
Daniele

Hi Daniele,

Please post a link to the form so I can take a quick look.

Bob

Hi GreyHead,
thanks a lot for the quick response.

The link is:

http://www.saitecsrl.net/index.php?option=com_chronoforms&chronoform=dataCustom

Regards
Daniele

Hi Daniele,

You have two different versions of MooTools loading - you need to get rid of the MooTools 1.12 being loaded by the template.

You will then need to make sure that JQuery is in no Conflict mode. Sometimes this is simple, but not always :-( Please see this FAQ

Bob