HEADER

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

To use it on your form fields:-

Code: Select all

<?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');" />


• 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 %*

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 ... de_sec_2.3
is:-

Code: Select all

<?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:

Code: Select all

<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>