Adding DatePicker to Custom Form

ch

chumby 10 Aug, 2011

Hi there,

I would like to add the MooTools date picker to a custom form.

I am using joomla 1.5.23 and Chronoforms_J1.5_V4_RC1.9

At the moment it says it cant because I have a custom form.

Any ideas?

Cheers
Chumby

Gr

GreyHead 10 Aug, 2011

Hi Chumby,

Create a new form using the Form Wizard and add a datepicker. Copy the Form HTML from this form and paste it into the Custom HTML of your current form.

Bob

ch

chumby 12 Aug, 2011

Hi Bob,

I followed your instructions here:

This one took a bit more detective work than usual.

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

and all I get when I past the code into my form is a lable and textfield box. There is no pop-up date picker at all.

Am I still doing something wrong? The below is what I pasted across...

Cheers
Chumby

<div class="ccms_form_element cfdiv_datetime" id="select_date_container_div"><label>Select date</label><input maxlength="150" size="16" class="cf_date_picker_1 cf_date_picker" title="" type="text" value="" name="input_datetime_2" />
<div class="clear"></div><div id="error-message-input_datetime_2"></div></div>

Gr

GreyHead 13 Aug, 2011

Hi Chumby,

Max changed the DatePicker code in ChronoFormsv4 RC1.9 and the post you found is out of date. Try removing the code from the DateTime Picker config box. If you need to configure the DatePicker there is now a DateTime Configuration action in the Utilities Group.

Bob

ch

chumby 07 Sep, 2011

Hi Bob,

Thanks for that....

I used the wizard to create a new form... just inserted a datepicker field. The code I received, I then pasted into my custom form (see below) but it did not work. All I received was an empty text field and then when I double clicked on it I get the value 23.23.23. Weird.

Any ideas? Code below.

<div class="ccms_form_element cfdiv_datetime" id="select_date_container_div"><label>Select date</label><input maxlength="150" size="16" class="cf_date_picker" title="" type="text" value="" name="input_datetime_0" />
<div class="clear"></div><div id="error-message-input_datetime_0"></div></div>

Gr

GreyHead 16 Sep, 2011

Hi Chumby,

I think that should work OK. I just pasted your code into a new form and it gives me a valid date when I submit.

Data Array:

Array
(
    [input_datetime_0] => 2011-09-10
    [submit] => Submit Query
    [b712c9c787a9c9b4fc5791f445401205] => 1
    [option] => com_chronoforms
    [chronoform] => test_form_2
    [event] => submit
    [Itemid] => 
)

Bob

ub

ubergio 15 Oct, 2011

Hi Chumby,
I'm totally a rookie about this argument, but i write below my code... it has some mistakes in other parts, but the datepicker seems to be ok..
I think that your code is incomplete because if you see the source code of a page with the datepicker corretly inserted by the easy wizard, you can see that there are some lines also in the header:

<head>
  <link rel="stylesheet" href="http://yoursite/components/com_chronoforms/css/datepicker/datepicker_dashboard.css" type="text/css" />
<script src="http://yoursite/components/com_chronoforms/js/datepicker/datepicker.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
  window.addEvent('load', function() {  
new DatePicker('.cf_date_picker', {pickerClass: 'datepicker_dashboard', format: 'Y-m-d', inputOutputFormat: 'Y-m-d', allowEmpty: true});
								new DatePicker('.cf_datetime_picker', {pickerClass: 'datepicker_dashboard', inputOutputFormat: 'Y-m-d H:i:s', timePicker: true, allowEmpty: true, format: 'd-m-Y H:i:s'});
								new DatePicker('.cf_time_picker', {pickerClass: 'datepicker_dashboard', inputOutputFormat: 'H:i:s', timePickerOnly: true, allowEmpty: true, format: 'H:i:s'});
							});
		
//]]>
</script>
</head>

and then the code in the body:


<div class="ccms_form_element cfdiv_datetime" id="insert_date_container_div"><label>Insert date</label><input maxlength="150" size="16" class="cf_date_picker" title="" label_over="0" hide_label="0" type="text" value="" name="date" />
<div class="clear"></div><div id="error-message-date"></div></div>

<div class="chronoform">
<a href="http://www.chronoengine.com">Powered By ChronoForms - ChronoEngine.com</a>
</div>

(and the code related to the submit button)...
I hope this will help!

Ciao!
Giovanna

Forums

Adding DatePicker to Custom Form