Forums

v4 is very nice; I searched to find this answer but was unable to find it.

Where do you change the date, and time formats? Thanks in advanced!

Hi needshelp,

This one took a bit more detective work than usual.

[list=a]

Drag a 'datetime Box' element to your form

Click the spanner icon and give the element a distinctive class name e.g. cf_date_picker_1

Go to the Forms Manager and click the 'Name' link for your form to open the Form Editor.

On the General tab scroll right down to the bottom where you will find the DateTime Picker selector box

Enter cf_date_picker_1::{inputOutputFormat: 'd/m/Y', allowEmpty:true } in the box

Save the form and check the data picker is working OK

[/list:o]

Options for this box that can be put inside the curly brackets are:[list]

inputOutputFormat: 'd/m/Y' where the 'date/time string is taken from the PHP date formats, the default value is 'Y-m-d H:i:s'

format: 'd/m/Y' where the 'date/time string is taken from the PHP date formats, the default value is 'd-m-Y'. This only afects the displayed value.

allowEmpty: true the default setting is false that will automatically insert a date.

pickerClass: 'datepicker_dashboard' used for styling

timePicker: true adds a time picker which displays after a date is selected, default is false

timePickerOnly: true only shows the time picker, default is false

There are almost certainly other settings to be found in the calendar docs.

[/list]
Bob

Later: The DatePicker documents are here.

There are bugs in the DatePicker implementation in CFv4 RC1.8 - see this thread for more info and fixes for Joomla! 1.5

I tried this first, but couldn't get it to work anyway.

My code-line is:
cf_date_picker::{ allowEmpty:true, timePicker:true, inputOutputFormat:'d-m-Y H:i'}

but when i have chosen in the calendar and timepicker, then it still only shows e.g: 14-04-2011
and not the time.

Hi Brick1881,

Did some more digging and found that the display is set by format: 'd-m-Y H:i' (inputOutputFormat sets the format for saving).

But I can only get it to work by manually editing the Form HTML to set a unique class for the input, If cf_date_picker is left in there then some default values over-ride the values we are trying to set.

There's a bug to be fixed here.

Bob

Ok, great Forum respons time though.

As far as I can see there are two issues here.
1. After choosing date and time from the fancy date and time pickers, only the date is displayed in the form field. In my case: d-m-Y. The client need of course to see if they have chosen the right time, and it should be possible to exclude seconds from being saved.

2. In the emails the format is Y-m-d H:i:s. This should also be possible to configure.

With this complex format, google calendar is not able to recognize the end date and times. Only starting dates.

Hi Brick1881,

They are both configurable as I described provided that you manually set a unique class name.

Bob

That's good news, but I do not know where to add the classes, and I do not know what to add. Sorry.
Form HTML - is that the Code-tab after clicking the name of my form? If that is the case, do I have to switch from Wizard to Custom?

My best guess is that i should enter something like this somewhere:
<?php .cf_date_picker2 { allowEmpty:true; timePicker:true; inputOutputFormat:'d-m-Y H:i'; } ?>

and then add cf_date_picker2 to the Form Field Class, but that leaves me with the e-mailing format.
Sorry again, but that is how much I know about programming.

Another bug I found (I think) is that I added the Captcha Input box to my form and set validation to required --> then for ease of testing, i deleted the box (without removing the validation), but the form still demanded that I filled in the box. That resulted in a form that was not working anymore, so I had to start over again with a new form. Good thing for practice, but I can imagine that it would be annoying for someone.

Hi,

There is a small bug here which I will fix in the new release.

inside the "DateTime Picker Selector" field under the form edit page please enter:
datetime::{timePicker: true, format: 'd-m-Y H:i:s'}

Then please use a "Text field" and give it the class "datetime" to get a datetime picker with a time output in the field.

If you want to omit the seconds from the field value then you may use this instead:
datetime::{timePicker: true, format: 'd-m-Y H:i:s', inputOutputFormat: 'Y-m-d H:i'}

Regarding the captcha field, if you remove the captcha field then you should disable the captcha itself as well (or remove the "check captcha" action if you are using the advanced wizard)

Regards,
Max

The datepicker can be customized with some options in the General settings panel of the form.

Here you are some examples:

Minimum and maximum dates allowed to select
my_field_class::{minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}}
[attachment=3]cfminmax.png[/attachment]


Months and days in italian
my_field_class::{months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato']}
[attachment=5]cfitalian.png[/attachment]

Modify the number of years per page
my_field_class::{yearsPerPage: 10}
[attachment=4]<!-- ia4 -->cflimityears.png<!-- ia4 -->[/attachment]

View the years selection as first panel
my_field_class::{startView: 'decades'}
[attachment=6]cfdecades.png[/attachment]

View the months selection as first panel
my_field_class::{startView: 'year'}
[attachment=2]cfyear.png[/attachment]

Some options combined
my_field_class::{minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'}
[attachment=0]CF_combined.png[/attachment]
[attachment=1]cfgeneralsetting.png[/attachment]

The other options can be found on DatePicker page.

Thanks Mat, for everybody else may be reading this, we have changed the code snippets a little bit in RC1.9, so please pay attention to follow the new code style.

Regards,
Max

Hi,

I'm adding to this thread the code to set start and end dates for the DatePicker. This code works with ChonoForms v4 for Joomla! 1.5 only (there is a bug in the datapicker on Joomla! 1.6).

[list=a]Drag a Load JS action to the OnLoad event and add the following code.var s_delay = 80; var e_delay = 30; var startDate = ''; var pad = function(str) { str = String(str); return (str.length < 2) ? "0" + str : str; } d = new Date(); d.setDate(d.getDate() + s_delay); var d_month = d.getMonth(); d_month++; startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear(); var endDate = ''; d = new Date(); d.setDate(d.getDate() + s_delay + e_delay); var d_month = d.getMonth(); d_month++; endDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();
The variables s_delay and e_delay at the beginning are the delays from today for the starting point that the datepicker will be 'open'; and the number of days it will be open. In this case it will be open in 80 days time and allow entries for the following 30 days.

Note: a negative s_delay will put the start date into the past.

In the Custom DatePicker 'Extra Options extension' box add thisminDate: { date: startDate, format: 'd-m-Y' }, maxDate: { date: endDate, format: 'd-m-Y' }

[/list:o]
To set a start date *only* the code is as follows:var s_delay = 80; var startDate = ''; var pad = function(str) { str = String(str); return (str.length < 2) ? "0" + str : str; } d = new Date(); d.setDate(d.getDate() + s_delay); var d_month = d.getMonth(); d_month++; startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();andminDate: { date: startDate, format: 'd-m-Y' }
Bob

Im trying to use this on a site I am developing: http://silvergolddesign.com/sinsen/index.php?option=com_chronoforms&chronoform=bestilltime

but neither the first suggestion of using cf_...{} in the Datetime picker selector and as a class nor the use of a Text field instead worked for me. Nothing shows up in the box. What am I doing wrong?

Hi,

Yes, the format to enter these settings has changed a little bit, please check the example under the "Datepicker settings" box in the new version, it shows how to enter the settings now, example:

old settings:
my_field_class::{minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'}

new settings:
minDate: {date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'

Regards,
Max

Does this work in Joomla 1.7? (or 1.6?) at all?

Should I use the Text Field, or the Datetime box? Or the custom datetime?

And how does the box know what class to use if in the new code in datepicker settings does not specify class?

Hi kjetisve ,

This works OK in Joomla! 1.6/1.7

Use a DateTime element and set the Class in the element configuration.

Bob

I'd like to use this on my site but to be honest I'm struggling to understand how to.

Can someone please do a walk through, I'm using v4 on joomla 1.7.
Thanks

Hi firesi ,

The starting point is just to add a DateTime element to your form. That will work OK on it's own without any other settings.

If you then want to customise that it gets a little more complicated but we need to know what you need to change.

Bob

I've managed to get a date to display in the field, but once I try to click on the field, nothing happens. What am I doing wrong? (Does one have to create a table?)

Steps I did: (http://silvergolddesign.com/sinsen/index.php?option=com_chronoforms&chronoform=bestilltime)

1. Create a DateTime box - set the Class datepicker
2. Created a Custom Datepicker and set the Class datepicker
3. Created a Load JS, set dynamic to no, and pasted this

var s_delay = 80; var e_delay = 30; var startDate = ''; var pad = function(str) { str = String(str); return (str.length < 2) ? "0" + str : str; } d = new Date(); d.setDate(d.getDate() + s_delay); var d_month = d.getMonth(); d_month++; startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear(); var endDate = ''; d = new Date(); d.setDate(d.getDate() + s_delay + e_delay); var d_month = d.getMonth(); d_month++; endDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();

Hi kjetisve,

Please try just this
1. Create a DateTime box

You may also need to fix the JavaScript error in the StyleSwitcher in your template.

Bob

Tried just having a datetime box. Nothing appears in the box, and nothing happens when clicked. What is the Javascript error and where do I find it?

kjetisve,

After some trial and error this is what I did to change date format to display Month/Day/Year in Chronoforms v4 latest release using the 'Wizard'. I have 3 'Datetime Box'. The only boxes filled in on each one are:

Field Name
Field ID
Field Max Length
Field Size
Label Text

Under the 'General' tab for this form in the box 'DateTime Picker config' (at the bottom of the page) I have the following:

format: 'm-d-Y'

No brackets, just as it appears above. Trying the other settings mentioned in previous posts resulted in nothing happening when I clicked in the date field on the form. I have not tried adding any other settings because I don't need them at this point.

Quick follow-up.

Using the settings I mentioned previously will not change the output. The output will still be Y/M/D. I am now using a 'Custom Datepicker' under 'Actions' to achieve both input and output resulting in M/D/Y.

My problem is that nothing is showing. Tried creating a new form, and just adding a datetime box w/o doing anything else: http://silvergolddesign.com/sinsen/index.php?option=com_chronoforms&chronoform=bestill1

What can I do?

whoa - just discovered it works! only, the calendar gets pushed all the way down to the bottom of the page, it even makes the page longer to push the calendar down to a set position or something.

Hi kjetisve ,

In Firefox the location looks OK but a JavaScript error in the stylechange script stops the header display and the datepicker from working.

Bob

Allright, so in the javascript/md_stylechanger.js. But what is the error?
Edit: Sorry, thought at first this was a chronoform error. Ill try figure out whats wrong in the template.
Edit2: Tried commenting out the js, but the datetime box still gets moved down to the bottom of the page. any suggestions?

Hi kjetisve,

From Firebug in FireFox:

container is null
[Break On This Error] container.set('html', content);
javascript/md_stylechanger.js (line 66)

Bob

And how does the box know what class to use if in the new code in datepicker settings does not specify class?

I need to define two different settings on for two fields and I read now in the description of DateTime Picker selector:

Enter the class name assigned to the datetime picker fields, e.g: dateTimePicker OR datetime::{timePicker: true}|#|datetime2::{timePicker: false}

but if I try this syntax: datetime::{timePicker: true}|#|datetime2::{timePicker: false} once saved the content becomes "Array" and the form fields gets the default settings.

(I had to hack the file /administrator/components/com_chronoforms/views/edit.php defining 'type' => 'textarea'
and removing 'maxlength' => 500 on line 71 (CF v4 beta2) to manage long attributes)

Hi mat,

You can set the Time Picker on or off in the datetime box element configuration. It also looks as though you have an old vesion of ChronoForm v4 installed.

Bob

You can set the Time Picker on or off in the datetime box element configuration.

Thanks Bob, but it was only a sample.
I need something like this:
nascita::{minDate: {format: 's-m-Y', date: '01-01-1960', format: 'd-m-Y'}, maxDate: {date: '31-12-1999', format: 'd-m-Y'}, months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'], startView: 'decades'}|#|giorno_cerco-te::months: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre' ], days: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato']};
Two fields with italian translation, but one of this with minDate, maxDate and startView.

Hi mat,

The you should use the Cutom DatePicker action from the Utilities group.

Bob

You are right Bob, I haven’t seen before the “Custom Datepicker” action 😶

Via Ajax I load new fields into my form and I also want to add the datepicker functionality to those fields. I tried using attach() but unfortunately without success.

So I ended up with repeating the exact load function in my Javascript after a successfull ajax request. Like this:

new DatePicker('.si_date_picker_factuurinvoer', {pickerClass: 'datepicker_vista', format: 'd-m-Y', inputOutputFormat: 'd-m-Y', allowEmpty: 0, timePicker: 0, timePickerOnly: 0, onClose: berekenvervaldatum, maxDate: { date: factuurinvoermaxdatum, format: 'd-m-Y'}});

Is it allright to do it like that?
(btw: using CF4, Mootools1.3, CustomDatePicker Action)

Greetings, Rolf

Hi Rolf,

If it works OK then it is OK.

Bob

hi greyhead,

I have two date fields in my leave application form namely from date field and to date field. out of which saturday and sunday wont be taken into consideration as working days.

I have anopther textbox which should calculate the no. of working days the person applies for leave.

Can it be calculated and displayed when the user selects the two date fields, while taking working days into consideration and where should this code be written?

Also a person should not be able to select a date which is already passed. can it be done?

Please Help.!

Thanks & Regards,
TINTIN

Hi TINTIN ,

Yes it can be done but it will be quite complicated. Dates are usually messy and in this case you have to detect weekends and presumably 'official' holidays too - that requires some way to look them up.

I'd probably choose to write this with PHP after the form submits though it could be done in JavaScript. Google is probably the place to start - this can't be the first time this script has been required.

Bob

hey greyhead,

Thanks, I thought so. Anyways, is there a way to stop the user from accessing the past dates??
I mean to stop user from navigating to the past months and year?

Thanks for the help!

Regards,
TINTIN

Hi TINTIN,

Yes, there's a minDate option that you can set - see this post.

Bob

hi Greyhead,
I referred the post u pointed out and I implemented the following code
var s_delay = 80; var startDate = ''; var pad = function(str) { str = String(str); return (str.length < 2) ? "0" + str : str; } d = new Date(); d.setDate(d.getDate() + s_delay); var d_month = d.getMonth(); d_month++; startDate = pad(d.getDate()) +'-'+ pad(d_month) +'-'+ d.getFullYear();
and the following in custom date picker.
minDate: { date: startDate, format: 'd-m-Y' }

however, when i click on the datetime field nothin happens. it remains blank.
Also i want to set the minDate as the current date(for example 08-08-12, if the user fills the form today.)

Please help.!

Thanks & Regards,
TINTIN.

Hi TINTIN,

Sorry, Looks like a bug in the DatePicker. It may be a problem with the more recent versions of Joomla! using MooTools 1.3. The DatePicker code is known to have problems with this.

If you switch to the MooTools DatePicker this should work again.

Bob

Hey Greyhead,

Thanks a lot! you have been of great help!

Thanks & Regards,
TINTIN

I had two Joomla 2.5 sites in development running under WAMPserver on my laptop. The 2nd site was created to learn to use Chronoforms. The 2nd site seems to offer datepicker settings which are not available on the 1st site???
Am I using different versions of Chronoforms V4? (You can see the difference in the two form settings in the attached pictures: DatePickerConfigOn and DatePickerConfigOff).

My main problem however is that I cannot send emails via the form. I have tried all sorts of Joomla settings in the global configuration. I end up with 'Cannot instantiate mail function' (see screenshot with array). Maybe this is because I am running under WAMPserver on the laptop? To test this I tried to send a message via my online site.

I don't yet have Chronoforms on my online site (http://sebari.nl) but if I try to send a message on the online site via the Joomla contacts form I get an error: SMTP Error! Could not connect to SMTP host. (My last attempts were with mailer set to SMTP, openSSL.dll enabled in php.ini, port 465 and SMTP authentication set to yes.)

Hi christian.gibson,

There was an extra MooDatePicker option added in RC3.21

WAMP installations don't usually have mail servers installed by default. If the server has an internet Connection you may be able to configure your site to use a GMail server. The mailer settings are in the site Global Configuration dialogue.

Bob

Hi people! ;-)

I'm having some issues with DateTime Box.
I have two types of fields, one only for date and another only for time.
If I don't change anything in the DateTime Picker config, boths fields works fine, but I really need to change the date format.

This is the code that I wrote at DateTime Picker config:

format: 'd-m-Y', months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro' ], days: ['Domingo', 'Segunda-Feira', 'Terça-Feira', 'Quarta-Feira', 'Quinta-Feira', 'Sexta-Feira', 'Sábado']

The problem is: if I use this code, the date fields works ok but the time Fields (with TimePicker ONLY selected) now shows only the date (even if I choose the time correctly).

So, I think this is a syntax problem, but the question is: how can I set different formats for Date and Time?

Thanks a lot!!!

Hi Bruno,

If you use the Custom DatePicker actions from the 'Power Fields' action group then you can customise the two date-pickers separately. The DateTime Picker config box configures all of the pickers in the form.

Bob

Hi Bob!

Thanks for your help!
I had to update my Chronoforms - which I didn't know that I had an old version - and, thanks to you, It worked!

Thanks a lot man! You're a lifesaver!

Hello .
This is my mootools date picker config
format:'%Y-%m-%d %H:%M:%S', minDate: '2012-01-01 12:00:00',maxDate: new Date()

Today is 19 June .

I wish to be able to choose date before 19 June and not after .
The current time will show the current computer time .

However if i set my config to format:'%Y-%m-%d %H:%M:%S' , i can get my current time .
But i can also choose dates from after 19 june , which is not what i wanted .

any solutions ? please help .

Hi yongdingg,

I just copied you configuration string into a test form and it appears to work correctly. It shows dates from 1 Jan 2012 to 1 Jul 2012 (today).

Bob

Hallo,

i can't change Output in my Form.
i use ChronoForms 4.0 RC3.4.1 on Joomla 1.5.22 and my DatePicker Type is "Default".

i put in DateFiled:
"Field Class" -> "art-postcontent::{timePicker: false, format: 'd-m-Y H:i:s', inputOutputFormat: 'd-m-Y H:i'}"

And in "DateTime Picker config" is empty.

<div class="ccms_form_element cfdiv_datetime" id="autoID-e5aede781a010bc0af22f57d36e5c6ca_container_div" style=""><label>Datum*</label><input maxlength="80" size="30" class="art-postcontent::{timePicker: false, format: 'd-m-Y H:i:s', inputOutputFormat: 'd-m-Y H:i'} validate['required'] cf_date_picker" title="" type="text" container_id="0" value="" name="input_datetime_6" />

Here is URL:
http://www.fahrdienst-ulm.de/reservierung.html

Thx. for same help.
Acemi.

Hi Acemi,

Adding the DatePicker Options in the Class box won't work.

Either use the default class and add the options to the DateTime Picker config box on the Form General tab; or

Set a custom class and use the Custom DatePicker action from the Utilities action group to configure it.

Bob

Hi Bob,

thx for help. Bud, i don't understand someting!
1) i have define a costem class-name "hin_datum" and write in "Field Class".
2) And define a "Events" as "on Load -> Custom Datepicker"
3) define in this "settings -> Field Class=hin_datum", "Extra options extension=format: 'd-m-Y'"
it's don't work!

what do i wrong?

Acemi.

Hi Acemi,

That should work OK but evidently isn't. I strongly recommend that you don't use the default datepicker with Joomla! 2.5 as it has some bugs with more recent versions of the MooTools library. The MooTools datepicker is more reliable.

Bob

I have a problem with duplicated datetime pickers.

I added 2 datetime pickers to a form.

In the DateTime Picker config I added some option.

I added a Custom Mootools Datepicker because I need to customise the behaviour of one of those DTP. One of them has a field class defined, the other hasn't.

What happens is that when I click on the customised field, 2 DTP appear, one over the other, one customised, the other with the general properties.

As to my understanding of the DTP object this behaviour is wrong.
The DateTime Picker config tooltip says:

this will affect all the default date fields in the form, custom ones will not be affected

What am I missing here?

Thank you
maxx

Hi Maxx,

Hmmm, there are some oddities with DatePickers but I don't recall this one.

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

Bob

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

http://www.ciclobby.it/cms/index.php?option=com_chronoforms&chronoform=evento">
http://www.ciclobby.it/cms/index.php?option=com_chronoforms&chronoform=evento

Sorry, it is in italian.

Data inizio and Data fine are the customised DTPs.
If you click on the field and drag the DTP you'll find the 2nd one. The 1st has the customised properties, the 2nd the general properties.

Midway in the form there's a non customised DTP Ritrovo il... alle...

Firebug reports no javascript error.

Datetime Picker Config:
startView: 'month', format: '%d/%m/%Y %H:%M', months: ['gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre' ], days: ['do', 'lu', 'ma', 'me', 'gi', 've', 'sa'] , minDate: new Date()

Customised DTP:
onSelect and date format

Thank you
maxx

Hi Maxx,

Hmm . . .It's probably always been like that and I've never dragged one aside to look underneath :-(

The fix I found is to use a plain Text input element instead of a DateTime Picker element.

That effectively removes the 'default' cf_date_picker class from the input that is triggering the other datepicker.

Bob

Hmm . . .It's probably always been like that and I've never dragged one aside to look underneath :-(

Impossible! Aside from dragging the DTP, after selecting a date/time from the 1st one, the 2nd one stays there.

The fix I found is to use a plain Text input element instead of a DateTime Picker element.

Thank you, I'll try that if I don't find another fix.

Do you have any idea why the DTPs are managed by class and not by id. Wouldn't it be easier to manage the javascript code creating a new instance of a DTP and assigning it to a variable instead of a generic assignment? E.g. to get some extra behaviour when a date is selected someone has to add a field class to the DTP control, add a custom datepicker action, add the OnSelect event as an option, put the code of that event in a Load JS action. :?

bye
maxx

Hi Maxx,

Wouldn't it be easier to manage the javascript code creating a new instance of a DTP and assigning it to a variable instead of a generic assignment?

Yes, I agree, I have a part built code set somewhere that does that. It got put aside when some other emergency came up.

For the current code I suspect the Max copied an example from the MonleyPhysics site, or it got carried over from an earlier version of ChronoForms which used the Joomla! calendar class if I recall correctly.

Bob

(mootools datetimepicker)

I'd like to be able to select the date of a DTP based on a date selected on another DTP.
E.g.: in dtp1 I select a date, in DTP2 on opening there should be the same date and not today.

Ok, it doesn't seem that difficult until now: set the value of the element associated with DTP2.
But I don't want that. The 2nd date should be optional, so I don't want to set a value after selecting DTP1.

I tried to use the onOpen event and the select method of the DTP but there's something not working.

Any suggestion to accomplish that?

Thank you
maxx

Hi Maxx,

I've got this working with a chunk of custom code (needed because of some quirks in the way ChronoForms handles the datepickers). You can see it here

The form uses two standard Text box elements (not datepicker elements). They have ids 'start_date' and 'end_date'.

In the On Load event I have two extra actions, a Custom Code action and a Load JS action.

The Custom Code action has this code to load the required datepicker files (normally this is done by ChronoForms):<?php $document =& JFactory::getDocument(); // make sure that MooTools is loaded JHTML::_( 'behavior.mootools' ); $cf_url = JURI::root().'components/com_chronoforms/js/datepicker_moo/'; // you can change the uncommented line here to change the style $datepicker_style = $form->form_params->get( 'datepicker_moo_style', 'datepicker_dashboard' ); $document->addStyleSheet( $cf_url.$datepicker_style.'/'.$datepicker_style.'.css' ); // set the datepicker language $lang =& JFactory::getLanguage(); $tag = $lang->getTag(); if ( !$tag ) { $tag = $lang->getDefault(); } $use_tag = 'en-US'; if ( file_exists( $cf_url.'Locale.'.$tag.'.DatePicker.js' ) ) { $use_tag = $this->tag; } // load the datpicker script files $document->addScript( $cf_url.'Locale.'.$use_tag.'.DatePicker.js' ); $document->addScript( $cf_url.'Picker.js' ); $document->addScript( $cf_url.'Picker.Attach.js' ); $document->addScript( $cf_url.'Picker.Date.js' ); ?>
And the Load JS action has this code:window.addEvent('load', function() { var start_date, end_date; // set up the start datepicker start_date = new Picker.Date($('start_date'), { pickerClass: 'datepicker_dashboard', format: '%Y-%m-%d', allowEmpty: true, useFadeInOut: !Browser.ie }); // set up the end datepicker end_date = new Picker.Date($('end_date'), { pickerClass: 'datepicker_dashboard', format: '%Y-%m-%d', allowEmpty: true, useFadeInOut: !Browser.ie }); // add a check when the end datepicker is opened end_date.addEvent('open', function() { if ( start_date.date != end_date.date ) { end_date.options.minDate = start_date.date; } }); });
The setup options here are the default ones used by ChronoForms, you can change them or add others as needed.

Bob

PS To set the end_date to be different from the start_date you can replaceend_date.options.minDate = start_date.date;with, for exampleend_date.options.minDate = start_date.date.increment('day', 4);

I've got this working with a chunk of custom code (needed because of some quirks in the way ChronoForms handles the datepickers).

Great! Thank you!!! 😀

The form uses two standard Text box elements (not datepicker elements). They have ids 'start_date' and 'end_date'.
The Custom Code action has this code to load the required datepicker files (normally this is done by ChronoForms)

If I understand your code correctly, I used the following workaround: I added a Custom Datepicker in the OnLoad event. The CDTP is linked to nothing (a non-existent class).
That way CF loads all the needed files.

// add a check when the end datepicker is opened end_date.addEvent('open', function() { if ( start_date.date != end_date.date ) { end_date.options.minDate = start_date.date; } }); });

I had used something similar probably with the wrong syntax.

Thank you
maxx

Hi Maxx,

Yes, adding a Custom DatePicker will also load the files. I just pulled the necessary chunks of code out of the file rather than add the whole action.

All this is only necessary because the ChronoForms code doesn't attach the datepickers to JavaScript variables so I can't see any way to access them directly.

Bob

I've got this working with a chunk of custom code (needed because of some quirks in the way ChronoForms handles the datepickers). You can see it here

Sorry, I thought I saw your example working but I checked again and it is not what I need.

E.g. The form has 2 dates. The 2nd should be the same as the 1st one or empty.
If in the 1st I select 21 decembr 2013, I'd like to have 21 december 2013 as the default date when I open the DTP.
Your method blocks all dates before the one selected in the 1st DTP, but the DTP opens with today date. So I have to click many times to go to the right date.

// set up the end datepicker end_date = new Picker.Date($('end_date'), { pickerClass: 'datepicker_dashboard', format: '%Y-%m-%d', allowEmpty: true, useFadeInOut: !Browser.ie }); // add a check when the end datepicker is opened end_date.addEvent('open', function() { if ( start_date.date != end_date.date ) { end_date.options.minDate = start_date.date; } }); });

I modified your code a little bit but the problem at the origin of my request for help came back.

end_date.addEvent('open', function() { if ( $('start_date').value != $('end_date').value ) { end_date.select(Date.parse($('start_date').value)); } });

When I click on the 2nd text box the DTP opens at the correct date. Then I select a time but the OK button on the timepicker is not responding. If I click on another element the DTP stays there. If I click again on the textbox the timepicker fades away, the datepicker appears and so on for an infinite loop. 😟

bye
maxx

Hi Maxx,

Sorry, I misunderstood that.

Please try this in the if clause: if ( start_date.date != end_date.date ) { end_date.select(start_date.date); }

Or perhaps better: if ( start_date.date != end_date.date ) { end_date.select(start_date.date); end_date.options.minDate = start_date.date; end_date.options.maxDate = start_date.date; }
I updated the demo form to this version.
Bob

I updated the demo form to this version.

Sorry Bob but your demo is not working for me. It could be browser dependent, I'm using firefox.
Clicking on the only date available on the DTP has no effect. The DTP stays open.

Anyway, I'll devise something else.

Thank you
maxx

Hi Maxx,

It's working OK here in FireFox, maybe the browser cache needs clearing.

Bob

It's working OK here in FireFox, maybe the browser cache needs clearing.

Cache already cleared.

As you can see there are 2 DTPs because the end_date one is not closing after selecting a day.

😟

bye
maxx

There are no JS errors in the page ?

Did you try to add any "Custom date picker" actions to the form ?

There are no JS errors in the page ?

No js errors.

Did you try to add any "Custom date picker" actions to the form ?

In my form there's a Custom date picker action but I don't use it directly, I create my own instances of the dtp.
But the images I attached refer to Bob's test page.
Anyway, Bob's code is not working on my laptop (firefox/linux). I didn't tested on other PCs.
But it works for Bob...

Thank you
maxx

Hi Maxx,

You are quite correct, sorry. The second datepicker doesn't close after you to select the date.

I can't immediately see a fix for that. There doesn't appear to be a method to set the date for the opening view other than the select() one that then jams the script.

Bob