DateTime Box - Forums

ne

needshelp 04 Apr, 2011

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!

Gr

GreyHead 06 Apr, 2011

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

Br

Brick1881 13 Apr, 2011

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.

Gr

GreyHead 13 Apr, 2011

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

Br

Brick1881 13 Apr, 2011

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.

Gr

GreyHead 13 Apr, 2011

Hi Brick1881,

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

Bob

Br

Brick1881 13 Apr, 2011

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.

Max_admin 15 Apr, 2011

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

Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?

ma

mat 10 May, 2011

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]cflimityears.png[/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.

Max_admin 31 May, 2011

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

Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?

Gr

GreyHead 26 Jun, 2011

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 this

minDate: { 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();

and

minDate: { date: startDate, format: 'd-m-Y' }

Bob

kj

kjetisve 13 Sep, 2011

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?

Max_admin 13 Sep, 2011

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

Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?

kj

kjetisve 13 Sep, 2011

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?

Gr

GreyHead 16 Sep, 2011

Hi kjetisve ,

This works OK in Joomla! 1.6/1.7

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

Bob

fi

firesi 18 Sep, 2011

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

Gr

GreyHead 18 Sep, 2011

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

kj

kjetisve 18 Sep, 2011

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();

Gr

GreyHead 18 Sep, 2011

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

kj

kjetisve 18 Sep, 2011

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?

gw

gwells 18 Sep, 2011

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.

gw

gwells 18 Sep, 2011

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.

kj

kjetisve 19 Sep, 2011

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?

kj

kjetisve 19 Sep, 2011

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.

Gr

GreyHead 19 Sep, 2011

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

kj

kjetisve 20 Sep, 2011

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?

Gr

GreyHead 20 Sep, 2011

Hi kjetisve,

From Firebug in FireFox:

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

Bob

ma

mat 04 Nov, 2011

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)

Gr

GreyHead 04 Nov, 2011

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

ma

mat 04 Nov, 2011

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.

Gr

GreyHead 04 Nov, 2011

Hi mat,

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

Bob

ma

mat 04 Nov, 2011

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

Ro

Rolfo 22 Nov, 2011

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

Gr

GreyHead 24 Nov, 2011

Hi Rolf,

If it works OK then it is OK.

Bob

TI

TINTIN 07 Feb, 2012

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

Gr

GreyHead 07 Feb, 2012

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

TI

TINTIN 07 Feb, 2012

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

Gr

GreyHead 07 Feb, 2012

Hi TINTIN,

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

Bob

TI

TINTIN 08 Feb, 2012

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.

Gr

GreyHead 08 Feb, 2012

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

TI

TINTIN 08 Feb, 2012

Hey Greyhead,

Thanks a lot! you have been of great help!

Thanks & Regards,
TINTIN

ch

christian.gibson 04 Apr, 2012

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.)

Gr

GreyHead 04 Apr, 2012

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

br

brunolazzarini 15 Jun, 2012

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!!!

Gr

GreyHead 16 Jun, 2012

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

br

brunolazzarini 18 Jun, 2012

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!

yo

yongdingg 19 Jun, 2012

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 .

Gr

GreyHead 01 Jul, 2012

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

Ac

Acemi 12 Oct, 2012

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.

Gr

GreyHead 12 Oct, 2012

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

Ac

Acemi 13 Oct, 2012

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.

Gr

GreyHead 15 Oct, 2012

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

em

emmexx 28 Oct, 2012

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

Gr

GreyHead 28 Oct, 2012

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

em

emmexx 28 Oct, 2012

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

Gr

GreyHead 28 Oct, 2012

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

em

emmexx 28 Oct, 2012

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

Gr

GreyHead 28 Oct, 2012

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

em

emmexx 16 Nov, 2012

(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

Gr

GreyHead 19 Nov, 2012

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 replace

end_date.options.minDate = start_date.date;

with, for example

end_date.options.minDate = start_date.date.increment('day', 4);

em

emmexx 19 Nov, 2012

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

Gr

GreyHead 19 Nov, 2012

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

em

emmexx 19 Nov, 2012

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

Gr

GreyHead 19 Nov, 2012

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

em

emmexx 19 Nov, 2012

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

Gr

GreyHead 19 Nov, 2012

Hi Maxx,

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

Bob

em

emmexx 19 Nov, 2012

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

Max_admin 21 Nov, 2012

There are no JS errors in the page ?

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

Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?

em

emmexx 21 Nov, 2012

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

Gr

GreyHead 21 Nov, 2012

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