DateTime Box

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:

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

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'}}

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']}

Modify the number of years per page

my_field_class::{yearsPerPage: 10}

View the years selection as first panel

my_field_class::{startView: 'decades'}

View the months selection as first panel

my_field_class::{startView: 'year'}

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'}

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

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?