Confused with DatePicker - Joomla 2.5.8 / Chrono V4

Hi Bob,

Just cant get me head around what I need in trying to get sate picker working on a new Joomla 2.5.8 install. Have tried to read through your the posts already.

Details for sites are:

Live Site
============

Joomla 1.5.26
Chronoforms version: 4.0 RC3.3
URL: http://cooperautomotive.com.au/bookonline.htm
DatePicker Code: format: 'j M Y @ g:i:a', inputOutputFormat: 'j M Y g:i:a',timePicker: true
Component: System - Mootools Upgrade (1.2.4) enabled


Updated Site
============
Joomla: 2.5.8
Chronoforms version: 4.0 RC3.5.2
URL:http://www.cooperautomotive.com.au/joomla257/Website/bookonline.html
DatePicker Code: format: 'j M Y @ g:i:a', inputOutputFormat: 'j M Y g:i:a',timePicker: true
DatePickerType: MooToolsDate Picker
Component: System - Mootools Upgrade (1.2.4) enabled

Any ideas what I may be doing wrong with the setup above?

Appreciate your help.

Cheers
Martin

Hi chumby,

A couple of things here:

Component: System - Mootools Upgrade (1.2.4) enabled

You shouldn't need (or have) a MooTools upgrade plug-in in Joomla! 2.5, a later version of the MooTools library is included in the Joomla! installation package.

DatePicker Code: format: 'j M Y @ g:i:a', inputOutputFormat: 'j M Y g:i:a',timePicker: true

The MooTools datepicker uses different 'format' codes. I suggest that you remove all entries from this line for the moment to check that you have a datepicker loading correctly. To set a format there is only one 'format' option and it uses a different style of format string e.g. '%d-%m-%Y %H:%M:%S'

Bob

Hi Bob,

Have unistalled the mootools upgrade now and removed all formatting in the date picker as you suggest.

Still the picker is not appearing when I click on the preferred drop off and preferred pick up times.

Any ideas?

Cheers
Martin

Hi Martin,

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

Bob

Thanks Bob...

http://www.cooperautomotive.com.au/joomla257/Website/bookonline.html

Hi Martin,

It looks as though something odd is happening with the CDATA tags when the JavaScript loads and the vital part ends up commented out. This is a reformatted version - on the page it is all in one line

<script type="text/javascript">
window.addEvent('load', function() {
  new JCaption('img.caption');
});
//<![CDATA[   //]]>
//<![CDATA[
window.addEvent('domready', function() {
  document.id('chronoform_cooperBookingForm06052012').addClass('hasValidation');
    formCheck_cooperBookingForm06052012 = new FormCheckMax('chronoform_cooperBookingForm06052012', {
      onValidateSuccess: $empty,
      display : {
          showErrors : 0,
          errorsLocation: 1
        }
    });
});
//]]>
window.addEvent('load', function() {
  new Picker.Date($$('.cf_date_picker'), {
    pickerClass: 'datepicker_dashboard',
      format: '%Y-%m-%d',
      allowEmpty: true,
      useFadeInOut: !Browser.ie
  });
  new Picker.Date($$('.cf_datetime_picker'), {
    pickerClass: 'datepicker_dashboard',
      format: '%d-%m-%Y %H:%M:%S',
      timePicker: true,
      allowEmpty: true,
      useFadeInOut: !Browser.ie
  });
  new Picker.Date($$('.cf_time_picker'), {
    pickerClass: 'datepicker_dashboard',
      format: '%H:%M:%S',
      pickOnly: 'time',
      allowEmpty: true,
      useFadeInOut: !Browser.ie
  });
});
</script>

Do you have some kind of JS loader or zipper in use here?

Bob

Thanks for that Bob,

Not that I am aware of... we have just installed a "fresh" 2.5 Joomla, converted the database over and now trying to get the site working.

Nothing has changed since the Joomla 1.5 install at cooperautomotive.com.au

Any ideas for a fix?

Cheers
Martin

Hi Martin,

I'm afraid not - I think that something is re-formatting the the JavaScript as you rarely see it on a long single line like that.

Bob

So when you say something Bob... are you saying that it could be a component or plugin?

I am using SEF404... would that create a problem do you think

Cheers
Chumby

Hi Martin,

I really don't know - very unlikely to be the SEF URLs though. The template is the most likely cause.

Bob

Hi Bob,

Thanks for your help. Have managed to render out the page now... there was a combine css and js setting in the template. Turned that off and now the datepicker is working...

Still need to get the time coming up also after the datepicker shows, as per the form on the live site...

http://cooperautomotive.com.au/bookonline.htm

Any ideas or pointers here?

Cheers,
Martin

Hi Martin,

Yes - that kind of 'compression/combination' option will cause some problems. Often just changing the order in which things load enough to cause hiccups.

For the Time-picker you need to check the 'Enable Time picker' box in the element configuration and you may need to setthe Format thread on the Form General tab if you want to include the '@'.

Bob

Hi Bob,

Thanks again for helping me through this. Just not 100% what to do after your last post.

My form is a custom for... where do I go to enable the timepicker? I cant see any option anywhere.

Cheers
Martin

Hi Martin,

If you are using Custom HTML then I think that you need to set the class to cf_datetime_picker instead of cf_date_picker.

Bob

Hi Bob,

I am already using the datetime as per the code below. Should that be changed?

<td valign="top"><div align="left">
<div class="ccms_form_element cfdiv_datetime" id="select_date_container_div" >Preferred Drop Off </div></td>

Cheers
Martin

Hi Martin,

I think the only one that makes a real difference is the input class, changing the container to match would be tidy but probably not essential (unless you use the container class in your CSS or JavaScript).

Bob

Sorry Bob, Just a little bit confused... still trying to come to grips with CSS etc.

All the form code is below. This exact code is working on the live site with the Joomla 1.5 install... (as per the the link in the first post here)... Where do I need to make the change you suggest?

Appreciate all your efforts to help,

Cheers
Martin.

<table>

<tr>
<td colspan="2"><h3>Customer Details</h3>
</td>
</tr>

<tr> 
<td width="151" align="left">First Name</td>
<td><input name="booking_firstname" type="text" size="52" class="validate['required']" /></td>
</tr>

<tr> 
<td><div align="left">Surname</div></td>
<td width="629"><input name="booking_surname" type="text" size="52" class="validate['required']" /> </td>
</tr>

<tr> 
<td><div align="left">Phone</div></td>
<td><input name="booking_phone" type="text" size="17" class="validate['required','phone']" /> 
</td>
</tr>

<tr> 
<td><div align="left">Mobile Phone</div></td>
<td><input name="booking_mobile" type="text" size="17" class="validate['required','phone']" /> 
</td>
</tr>

<tr> 
<td><div align="left">Email</div></td>
<td><input name="booking_email" type="text" size="25" class="validate['required','email']" /></td>
</tr>

<tr> 
<td><div align="left">Preferred Contact</div></td>
<td><select name="preferred_contact">
<option value="phone only">Phone Only</option>
<option value="email only">Email Only</option>
<option value="email or phone">Email or Phone</option>
</select></td>
</tr>

<tr  border="0" bordercolor=""> 
<td><div align="left"><p></p></td>
</tr>
<tr  border="0" bordercolor=""> 
<td><div align="left"><p></p></td>
</tr>

<tr  border="0" bordercolor=""> 
<td colspan="2"><div align="left"><h3>Vehicle Details</h3>
</div></td>
</tr>


<tr  border="0" bordercolor=""> 
<td><div align="left">Car Rego</div></td>
<td><INPUT size="52" type="text" name="booking_rego" class="validate['required']" /></td>
</tr>


<tr border="0" bordercolor=""> 
<td><div align="left">Car Make</div></td>
<td>
<select name="booking_car_make">

<option value="not selected"></option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Dodge">Dodge</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Holden">Holden</option>
<option value="Honda">Honda</option>
<option value="Hyundai">Hyundai</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Land Rover">Land Rover</option>
<option value="Lexus">Lexus</option>
<option value="Mazda">Mazda</option>
<option value="Mercedes-Benz">Mercedes-Benz</option>
<option value="Mini">Mini</option>
<option value="Mitsubishi">Mitsubishi</option>
<option value="Nissan">Nissan</option>
<option value="Peugeot">Peugeot</option>
<option value="Renault">Renault</option>
<option value="Saab">Saab</option>
<option value="Ssangyong">Ssangyong</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
<option value="Toyota">Toyota</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Volvo">Volvo</option>
<option value="other">OTHER</option>
</select></td>
</tr> 

<tr  border="0" bordercolor=""> 
<td><div align="left">Car Model</div></td>
<td><INPUT size="52" type="text" name="booking_car_model" class="validate['required']" /></td>
</tr>

<tr  border="0" bordercolor=""> 
<td><div align="left">Car Year</div></td>
<td>
<select name="booking_car_year">
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
</select></td>
</tr>

<tr  border="0" bordercolor=""> 
<td><div align="left">Car Body Type</div></td>
<td>
<select name="booking_car_body_type">
<option value="4x4">4x4</option>
<option value="Convertible">Convertible</option>
<option value="Hatchback">Hatchback</option>
<option value="Minibus">Minibus</option>
<option value="Sedan">Sedan</option>
<option value="SUV">SUV</option>
<option value="Station Wagon">Station Wagon</option>
<option value="Ute">Ute</option>
<option value="Van">Van</option>
</select>
</td>
</tr>

<tr> 
<td><div align="left">Transmission</div></td>
<td><select name="transmission_type">
<option value="automatic">Automatic</option>
<option value="manual">Manual</option>
</select></td>
</tr>

<tr> 
<td><div align="left">Fuel</div></td>
<td><select name="fuel_type">
<option value="petrol">Petrol</option>
<option value="diesel">Diesel</option>
<option value="hybrid">Hybrid</option>
<option value="gas">Gas</option>
<option value="dual_fuel">Dual Fuel</option>
</select></td>
</tr>

<tr> 
<td width="151" align="left">Engine Size</td>
<td><input name="engine_size" type="text" size="52" /></td>
</tr>


<tr border="0" bordercolor=""> 
<td><div align="right"><p></p></td>
</tr>

<tr  border="0" bordercolor=""> 
<td><div align="right"><p></p></td>
</tr>

<tr border="0" bordercolor=""> 
<td colspan="2"><div align="left"><h3>Service Details</h3>
</div></td>
</tr>

<tr border="0" bordercolor=""> 
<td><div align="left">Type of Service</div></td>
<td>
<select name="booking_service_type">
<option value="No Service Selected">Select Service</option>
<option value="149Service">$149 Service</option>
<option value="basic service">Basic Service</option>
<option value="service and safety inspection">Service and Safety Inspection</option>
<option value="premium service">Premium Service</option>
<option value="performance service">Performance Service</option>
<option value="major service">Major Service</option>
<option value="log book service">Log Book Service</option>
<option value="repair">Repair</option>
<option value="other">OTHER</option>
</select> <a href="http://www.cooperautomotive.com.au/index.php/car-services/scheduled-servicing" target="_blank"> [view comparison chart]</a></td>
</tr> 

<tr border="0" bordercolor=""> 
<td><div align="left">Location</div></td>
<td>
<select name="booking_location">
<option value="claremont">Claremont</option>
<option value="hobart">Hobart</option>
<option value="invermay">Invermay</option>
<option value="kingston">Kingston</option>
<option value="lindisfarne">Lindisfarne</option>
<option value="moonah">Moonah</option>
<option value="mornington">Mornington</option>
</select></td>
</tr> 

<tr>
<td valign="top"><div align="left">
<div class="ccms_form_element cfdiv_datetime" id="select_date_container_div" >Preferred Drop Off </div></td>

<td>
<input maxlength="150" size="26" class="cf_date_picker" title="" type="text" value="" name="booking_preferred_drop_off" class="validate['required']" />
<div class="clear"></div><div id="error-message-booking_preferred_drop_off"></div>
</td></tr>

<tr>
<td valign="top"><div align="left">
<div class="ccms_form_element cfdiv_datetime" id="select_date_container_div" >Preferred Pick Up</div></td>

<td>
<input maxlength="150" size="26" class="cf_date_picker" title="" type="text" value="" name="booking_preferred_pick_up" class="validate['required']" />
<div class="clear"></div><div id="error-message-booking_preferred_pick_up"></div>
</td></tr>





<tr border="0" bordercolor="">
<td valign="top"><div align="left">Comments</div></td> 
<td><TEXTAREA name="booking_comments" cols=32 rows=5 wrap="VIRTUAL" class="validate['required']" /></TEXTAREA></td> 
</tr>

<tr><td>
<div class="ccms_form_element cfdiv_text" id="autoID-612c003ec40ada2d32ad16147a14ce1b_container_div"><label>Enter the code</label><input maxlength="5" size="5" class="chrono_captcha_input" title="" type="text" value="" name="chrono_verification" />
{chronocaptcha_img}<div class="clear"></div><div id="error-message-chrono_verification"></div></div><div class="ccms_form_element cfdiv_submit" id="autoID-eafb92aee43e00b9723a4e6c59b8108c_container_div"><input name="input_submit_1" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_1"></div></div>
</td></tr>

</table>

Hi Martin,

It is the classes in these two lines

<input maxlength="150" size="26" class="cf_date_picker" title="" type="text" value="" name="booking_preferred_drop_off" class="validate['required']" />
. . .
<input maxlength="150" size="26" class="cf_date_picker" title="" type="text" value="" name="booking_preferred_pick_up" class="validate['required']" />

Bob

Wonderful Bob,

That fixed it... great!

Appreciate the help...

Cheers
Martin.