Use the calendar included in Joomla in your forms

For reference, the documentation for the calendar included with
joomla is here http://www.dynarch.com/demos/jscalendar/doc/html/reference.html

To use it on your form fields:-

<?php JHTML::_('behavior.calendar'); ?>
<input type="text" name="DateOfBirth" id="DateOfBirth" value="" />
<img class="calendar" src="templates/system/images/calendar.png" alt="calendar" onclick="return showCalendar('DateOfBirth', '%d-%m-%Y');" /> 

[list]

the JHTML call makes sure the necassary javascript is in the head of the page

input holds the returned date (and will set the inital date from the value attribute)

The image onclick calls showCalendar with the id of the input and the date format *note the %*

[/list]

The alternative way to call it, which seems to be the only way i could set the properties listed here http://www.dynarch.com/demos/jscalendar/doc/html/reference.html#node_sec_2.3
is:-

<?php JHTML::_('behavior.calendar'); ?>
<input type="text" name="DateOfBirth" id="DateOfBirth" value="" />
<img class="calendar" src="templates/system/images/calendar.png" alt="calendar" id="showCalendar" />
<script type="text/javascript">
		var startDate = new Date(1980,01,01)
        Calendar.setup(
          {
            inputField  : "DateOfBirth",         // ID of the input field
            ifFormat    : "%d-%m-%Y",    // the date format
            button      : "showCalendar",       // ID of the button
            date        : startDate
          }
        );
</script>

note:
There is a bug in the calendar that prevents the date property (inital date shown) from working. You can either pre-fill the value attribute of the input element or change if (dateEl) to: if (dateEl && dateEl.value) in media/system/js/calendar-setup.js (also make sure you pass a javascript date object)



hope this helps someone.

Hi wizdum

Excellent, thank you - much, much better than anything I'd managed to find. I'll take a good look.

Bob

This is a similar Example, how to use the Joomla-Framework built in Javascript Calendar: see here

Works fine here, even in german language.

Hi Savant,

Please can you post a code exmaple of how you've used this in ChronoForms. Just posting the code from the Dev page into a form (in php tags) gives me mostly errors - I'm clearly missing something.

Bob

Hi, here is what I did:

<td width="87">Arrival date</td>
<td colspan="4" nowrap="nowrap">
       	<?php JHTML::_('behavior.calendar'); ?>  
      	<input class="inputbox" name="arrivalDate" type="text" id="arrivalDate" size="18" maxlength="20" value="" />
        <img class="calendar" src="templates/system/images/calendar.png" alt="calendar" id="showArrivalCalendar" />
        <script type="text/javascript">
			var startDate = new Date(2008, 8, 7);
			Calendar.setup({
				inputField  : "arrivalDate",
				ifFormat    : "%m/%d/%Y",						
				button      : "showArrivalCalendar",
				range		: [2008,2008],
				date		: startDate
			});
        </script>
      </td>

Is there any chance that this functionality will be included in the next release as part of the selectable fields when creating forms? I have seen this in other Joomla form creation extensions.

Hi, It will be included or a better one if possible!

Regards
Max