installing jQuery , Date picker , joomla 2.5 with Chronoforms v4

Question

getting jquery date picker to work in Chrono forms v4: in Joomla 2.5

Ok I spent the past week futzing with this and there isn't any concise tutorials online that were helpful to me , so I'm posting how I got this to work. the date picker tutorial here is geared towards joomla 3, and the instructions weren't working on joomla 2.5 for me .

I still never found an explanation of which library was best for joomla 2.5 BUT I did eventually find a very well written plug-in extension for getting jQuery loaded into joomla 2.5. these were my findings , I hope they next person won't have to get as many grey hairs as me futzing through the internetz trying to find this relatively easy fix. .

jQuery Library Settings overview

install this plug in:

http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin

promising.. loads it correctly..
test it on your site by going into the plugin settings and setting these toggles :

System - JB Library

Scripts Handler:
Use Script Loader: Yes
Move Scripts to Bottom: Yes (default)

jQuery Library Settings
Load jQuery: Yes
jQuery Source: Local
jQuery Version: 1.8.3 min <- one I am currently using
jQuery No-Conflict: ENABLED < this is check to make sure multiple libraries aren't loading on top of each other.
Remove other jQuery: Yes <- if libraries ARE double loading it will clear them out to prevent conflicts, this was the big issue I had with other plugins they didn't do this check
Regex for jQuery file: ([\/a-zA-Z0-9_:\.-]*)jquery([0-9\.-]|min|pack)*?.js <-- default setting

Mootools Settings

Handle Mootools: Yes
Remove Mootools Core: No
Replace Mootools Library: No
Remove Mootools More:No
Replace Mootools More Library:No

Add Other Scripts
(I currently have this blank)

Strip Other Scripts
Strip Other Scripts: No

ie6 Bad Browser Warning
ie6 Warning: Enabled

Scroll to Top Button ** enable this as a check to see if jQuerry has installed correctly just a quick visual.
But after 2 weeks of horrid tutoris seeing this made me do a happy dance.

Add Scroll To Top Button?: Enabled
Back to top button style: Light
Translate Scroll To Top Text:Enabled
Scroll to text : BACK_TO_TOP

Lazy Load Images
Enable Lazy Load?: disabled

_______________________________________________________________

in Chrono Forums v4:

add in the Elements tab :

Custom Element (HTML/PHP)

Field Name: *BLANK*
Field ID :*BLANK*
Label Text: Calander
Pure code (check this box)

Code:
[code]<div id="datepicker"></div>
<input type='hidden' name='calendar_date' id='calendar_date' value='' />
[/code
click [b] Apply[/b]

_______________________________________

on the events Tab:

drag drop in a Custom Code event in the First place before show HTML:

This loades the calander plugin

Custom Code:

Mode: Controller

Action Label: *Blank*

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<div id="datepicker"></div>
 
<script>
$( "#datepicker" ).datepicker();
</script>

___________________________________

next Underneath the Show HTML add a Load JS event from the utilities menu.

This is where you configure your calendar, in My case I only want people to be able to pick the current days date . BUT this is extremely configurable , even as selective blocks of days or only certain days of the week , all those settings are in the jQury date picker documentation.
http://jqueryui.com/datepicker/

Plop in your JS Loader in the on load section , under show html.

JS Loader settings
Dynamic File: No

Code:

jQuery(function() {
  jQuery('#datepicker').datepicker(
    {
      minDate: 0,
      prevText: '',
      nextText: '',
      maxDate: '+0d',
      firstDay: 1,
      dateFormat: 'mm/dd/yy',
      onSelect: function(dateText, inst) {
      jQuery('#calendar_date').val(dateText);
    }
  });
});

____________________________________

now just add your debuggers and make sure you have a submit button to test and build away the rest of the forum.
I tested mine with both the debugger and made sure it sent it to my email..

i'll update with any bugs/or nuances I come across.