Buy Now
Sign in

DateTime Box

needshelp , April 04 2011, 17:00
N
needshelp 91
April 04 2011, 17:00 #67197
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!
GreyHead 64
April 06 2011, 19:56 #67418
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
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
B
Brick1881 6
April 13 2011, 14:15 #67943
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.
GreyHead 64
April 13 2011, 19:37 #67971
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
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
B
Brick1881 6
April 13 2011, 20:21 #67975
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.
GreyHead 64
April 13 2011, 21:15 #67981
Hi Brick1881,

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

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
B
Brick1881 6
April 13 2011, 21:42 #67984
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.
admin 28
April 15 2011, 07:44 #68029
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
If your main question got answered then please mark the answer using the button!
Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
M
mat 32
May 10 2011, 08:00 #69470
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'}}

cfminmax.png


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

cfgeneralsetting.png

Modify the number of years per page
my_field_class::{yearsPerPage: 10}

cfyear.png

View the years selection as first panel
my_field_class::{startView: 'decades'}

CF_combined.png

View the months selection as first panel
my_field_class::{startView: 'year'}

cflimityears.png

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

cfdecades.png
cfitalian.png

The other options can be found on DatePicker page.
Attachments
cfdecades.png
cfdecades.png
(16.33 KiB)
10535 Downloads/Views
cfitalian.png
cfitalian.png
(20.5 KiB)
10478 Downloads/Views
cflimityears.png
cflimityears.png
(13.63 KiB)
10475 Downloads/Views
cfminmax.png
cfminmax.png
(20.56 KiB)
10484 Downloads/Views
cfyear.png
cfyear.png
(14.97 KiB)
10407 Downloads/Views
cfgeneralsetting.png
cfgeneralsetting.png
(18.7 KiB)
10453 Downloads/Views
CF_combined.png
CF_combined.png
(16.47 KiB)
10423 Downloads/Views
admin 28
May 31 2011, 17:30 #70570
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
If your main question got answered then please mark the answer using the button!
Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
GreyHead 64
June 26 2011, 14:56 #72070
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
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
K
kjetisve 7
September 13 2011, 08:18 #88242
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?
admin 28
September 13 2011, 14:34 #89243
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
If your main question got answered then please mark the answer using the button!
Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
K
kjetisve 7
September 13 2011, 22:10 #90406
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?
GreyHead 64
September 16 2011, 13:06 #97804
Hi kjetisve ,

This works OK in Joomla! 1.6/1.7

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

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
F
firesi 3
September 18 2011, 00:58 #101539
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
GreyHead 64
September 18 2011, 09:05 #102344
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
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
K
kjetisve 7
September 18 2011, 11:35 #102487
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();
GreyHead 64
September 18 2011, 12:31 #102639
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
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
K
kjetisve 7
September 18 2011, 17:29 #103599
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?