How can I add a JQuery datepicker?

Written Jun 1, 2013 09:08

Problem: How to make calendar, that is always shown in the form without using an input field. One must be able to select date and then the value must be submitted with the form. (This was needed for table reservation form for restaurant).

This FAQ was originally posted by user Zahorijs in the forums and has been bug-fixed and updated by me.

Solution.

Note: this has been amended from the original forum post to simplify it a little and to use the Joomla! methods to load the JQuery files rather than amending the template.

NB! For this to work at the same time with Chronoforms built-in Mootools validation, you must be able to make jQuery and Mootools live on the same page without conflicts. How to do that is outside the scope of this guide.

You can see a demonstration form using CFv4 on Joomla 3 by clicking {rokbox text=|here|}http://j3.greyhead.org/index.php?option=com_chronoforms&chronoform=test_jquery_datepicker&tmpl=component{/rokbox}. Submit the form to see the selected date in the $form>data array.

To solve this problem, I [Zahorijs] used jQuery Datepicker.

1. Open your form in Advanced Form Wizard Mode (It's the default one). From Advanced Elements drag Custom Element (HTML/PHP) to where you want the calendar to appear. Configure it, leave the Field Name and Field ID boxes empty, set the Label text to Calendar, check the Pure code option; and in the Code section paste this:

<div id="datepicker"></div>
<input type='hidden' name='calendar_date' id='calendar_date' value='' />

Apply changes.

2. Click the Events tab and drag a Custom Code action in to the On Load event and move it up before the Show HTML action. Add this code to it. Make sure that the format code matches the format you set in the javascript below; and the id of the hidden input 'calendar_date' matches in each place:

<?php
// set a default date for the calendar
if ( !isset($form->data['calendar_date']) || !$form->data['calendar_date'] ) {
  $form->data['calendar_date'] = date('m/d/Y');
}
?>

This code will ensure, that your hidden field always has a value (current date), because Datepicker script will insert value only after the first click. IMHO Current day as a default value makes sense in the most of situations I [Zahorijs] can think of. You can change date format to any value you like.

3. In the Events tab from Utilities drag Load JS to On Load. Configure it, paste the following two blocks into Code section:

4. This first block of code loads the necessary jQuery files.

<?php
// load jQuery scripts
// loaded from Joomla! 3
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');
$doc =& JFactory::getDocument();
// loaded from the code.jquery.com site
$doc->addStylesheet('http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// loaded from a copy in a local folder$doc->addScript(JURI::root().'/components/com_chronoforms/extras/jquery/jquery.ui.datepicker.js');
?>

You will need to check that the appropriate files are being loaded on your site!!

Here I am using Joomla! 3 which has some of the core jQuery files included by default. See the comments in the code for the different methods used. Which is best will depend on your site version and setup.

Note: the jQuery datepicker is not included in the default Joomla jQuery files so I downloaded it from the jQuery site and added a copy of the file and the related language files to the /components/com_chronoforms/extras/jquery/ folder on my site.

5. The second block sets up the datepicker:

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

This is the function that shows the calendar and applies some settings to it, I will briefly explain what they do:

minDate: -1 - disables all date fields before today
prevText: "" and nextText: "" - changes Previous and Next text to empty, useful if you wish to insert some image there instead of words
maxDate: "+3M" - shows only 3 months in the future
firstDay: 1 - makes Monday the first day of the week
dateFormat: "mm/dd/yy" - defines date format (note that this is a JavaScript format string while the earlier one was a PHP format string)
onSelect - this part adds selected date as a value to the hidden field we made previously.

More settings you can find at jQuery Datepicker.

Apply it and you are set! Auto email template maker will find hidden field, so its very easy to use.

P.S. If you need to localize Datepicker, find appropriate language in this list, then copy contents of the language.js file to the beginning of the script and add this line(in example case you want to translate Datepicker to German):

jQuery('#datepicker').datepicker( jQuery.datepicker.regional['de'] );

to the end of our function. So in this case Load JS will look like this:

/* German initialisation for the jQuery UI date picker plugin. */
/* Written by Milian Wolff (mail@milianw.de). */

jQuery(function($){
 $.datepicker.regional['de'] = {
  closeText: 'schließen',
  prevText: '<zurück',
  nextText: 'Vor>',
  currentText: 'heute',
  monthNames: ['Januar','Februar','März','April','Mai','Juni',
  'Juli','August','September','Oktober','November','Dezember'],
  monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
  'Jul','Aug','Sep','Okt','Nov','Dez'],
  dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
  dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
  dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
  weekHeader: 'KW',
  dateFormat: 'dd.mm.yy',
  firstDay: 1,
  isRTL: false,
  showMonthAfterYear: false,
  yearSuffix: ''};
 $.datepicker.setDefaults($.datepicker.regional['de']);
});
jQuery(function() {
 jQuery( "#datepicker" ).datepicker({
  minDate: -1,
  prevText: "",
  nextText: "",
  maxDate: "+3M",
  firstDay: 1,
  dateFormat: "dd.mm.yy",
  onSelect: function(dateText, inst) {
   jQuery("#submittedDate").val(dateText);
  }
 }
 );
 jQuery( "#datepicker" ).datepicker( jQuery.datepicker.regional[ "de" ] );
});

FAQs

Solution.