Adding a Datepicker for ChronoForms v5

Written Dec 27, 2013 16:07

ChronoForms v5 rc2 did not not have a built-in datepicker; this FAQ describes a Joomla! 3 workaround that I developed for a user.

Note: a datepicker element was added to CFv5 in RC3, please upgrade if you are using an earlier version.

Note: this has been tested on Joomla! 3.2.1 and appears to work OK. It may be possible to adapt it to run on Joomla! 2.5 but I have not tried this (the jQuery library is loaded by ChronoForms but there seem to be timing and possibly conflict problems in getting this code to run).

On the form Designer tab add a text input to your form to use as a datepicker. Note the Id (in this example it is 'text1').

Download a copy of the EyeCon DatePicker for Bootstrap from here. Unzip the downloaded file and copy the datepicker folder to a new 'extras' folder on your site at /components/com_chronoforms5/chronoforms/extras

On the Setup tab add a Custom Code action before the HTML action and add this code:

<?php
JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework');
$doc = JFactory::getDocument();
$doc->addScript('/components/com_chronoforms5/chronoforms/extras/datepicker/js/bootstrap-datepicker.js');
$doc->addStylesheet('/components/com_chronoforms5/chronoforms/extras/datepicker/css/datepicker.css');
$script ="
jQuery( document ).ready(function( jQ ) {
  jQ('#text1').datepicker();
});
";
$doc->addScriptDeclaration($script);
?>

Change the jQ('#text1').datepicker(); if you have a different ID; repeat the line with different IDs to add more than one datepicker.

Save the form and test that the datepicker works OK. You can see my test here

To change the date format open the text input in the Designer tab and scroll down to the Extra params box; add, for example data-date-format='dd mm yyyy'

The icon in my example was added with a couple of extra lines after jQ('#text1').datepicker();

  jQ('#text1').after(
'<span class=\'add-on\'><i class=\'icon-calendar\'></i></span>');
  jQ('#text1').css({
    'display': 'inline-block',
    'margin-right': '6px'
  });

Other datepickers

Please see this post for a way to use the jQuery UIkit datepicker in CFv5.

This page has a list of JQuery time-pickers and date+time-pickers that could be used with CFv4.

FAQs

Other datepickers