How can I use a calendar field in a repeatable field in a Joomla form?

Question

I would like to allow users to be able to enter multiple dates, and was hoping I could use the repeatable form field type (new as of Joomla 3.3).

I do get the modal popup with rows to add/remove items, however the calendar icon does not popup a calendar picker. I tried with just a text input and that seems to work ok.

The relevant part of my form definition:

<field
        name="event_dates"
        type="repeatable"
        id="event_dates"
        icon="calendar"
        label="Event calendar dates"
        select="Select dates"
    >
    <fields name="jmfields_event_dates">
        <fieldset 
                name="event_dates_modal"
                repeat="true"
                hidden="true">
            <field 
                name="event_date"
                type="calendar"
                format="%d-%m-%Y"
                label="Date"
                />
        </fieldset>
    </fields>
</field>

Sbpro · Answer 1 · 2014-08-28T13:51:40.133

1

I haven't tried to have a calendar field inside the Repeatable field, but Repeatable field is too buggy yet with a bunch of javascript issues/conflicts. Check in your browser error console for any such issues. I would suggest to wait till Repeatable Field becomes more stable.

edited Aug 28 '14 at 13:51

answered Aug 28 '14 at 13:27

Sbpro

948
14
27

Pity, would be very nice way to handle multiple dates. I don't get errors in the console but I do notice that the calendar-buttons all have the same Id. – Jan Misker Aug 28 '14 at 13:49
@JanMisker "calendar-buttons all have the same Id" - that's interesting, as it can certainly make any code on the page misbehave – Sbpro Aug 28 '14 at 13:59

score 0 · Answer 2 · answered Sep 11 '15 at 16:31

I also wanted to do the same, and instead of the default calendar field I end-up using the jQuery date picker on a normal text field instead. You add the jQuery script on the page to target the input field and you have a little work around until the actual fix for the default calendar is out.

You need these files in your header:

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');
// I downloaded the datepicker only and placed it in this folder
$doc->addScript(JURI::root().'/media/jui/js/datepicker/jquery-ui.min.js');

The xml for the field:

<!-- Course_date Field. Type: Repeatable. (joomla) -->
<field
    type="repeatable"
    name="course_date"
    label="Course Dates"
    description="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_DESCRIPTION"
    id="course_date"
    class="course_dates"
    select="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_SELECT"
    icon="list"
    maximum="50">
    <fields name="course_date_fields" label="">
        <fieldset hidden="true" name="course_date_modal" repeat="true">
            <!-- Course Field. Type: Courses. (custom) -->
            <field
                type="courses"
                name="course"
                label="COM_LEARNINGMANAGER_EVENT_COURSE_LABEL"
                class="list_class"
                button="false"
            />
            <!-- Date Field. Type: Text. (joomla) -->
            <field
                type="text"
                name="date"
                label="COM_LEARNINGMANAGER_EVENT_DATE_LABEL"
                size="20"
                maxlength="50"
                description="COM_LEARNINGMANAGER_EVENT_DATE_DESCRIPTION"
                class="text_area datepicker"
                readonly="false"
                disabled="false"
                filter="STRING"
                message="Error! Please add date here."
                hint="COM_LEARNINGMANAGER_EVENT_DATE_HINT"
            />
        </fieldset>
    </fields>
</field>

Here is the script you need to add to the default.php or edit.php file:

<script type="text/javascript">
// means your repteable field can only take 50 rows
<?php $fieldNrs = range(1,50,1); ?>
jQuery('input.form-field-repeatable').on('row-add', function (e) {
<?php foreach($fieldNrs as $nr): ?>
    jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').datepicker(
        {
            minDate: -1,
            prevText: '',
            nextText: '',
            maxDate: '+3M',
            firstDay: 1,
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText, inst) {
            jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').val(dateText);
        }
    });
<? endforeach; ?>
});
</script>

Enjoy!

score -1 · Answer 3 · edited Feb 18 '15 at 12:45

You can try with this ("Multiplier module"). I used different approach to get same result like with Joomla repeatable form field type, and also with that avoid "pop-ups inside popup". Still in development phase, but maybe you can try with that concept. Regards.

What I did to solve similar problem?

I had a similar problem with default Joomla repeatable form field type, especially with "pop-up" form fields type (eg. Joomla "date"). Because of that I created some kind of module pattern (mod_multiplier) where I used different approach -> I wouldn't repeat form of fields (section), I want to use same section for multiple insertion.

Module mod_multiplier

Inside module xml file are 3 reserved fields "wrapper", "repeater", and "content".

Inside "wrapper" is the place for "repeatable" fields:

<fieldset name="basic" addfieldpath="/modules/mod_multiplier/models/fields">
  <!-- Wrapper is container for repeatable fields-->
  <fields name="wrapper">

    <!--This is the place where you insert your fields-->

  </fields>
  <field name="repeater" label="" type="repeater" />
  <field name="content" hidden="true" label="Content" type="hidden" />
</fieldset>

All content would be stored inside "content" field in JSON format. Every time when we press form "Add" button we will add one row of data to "content" field. After all, inside "content" we will have rows of data.

How that look inside tmpl/default.php file and how to get fields values?

Hierarchical data structure has 3 levels: rows, row and field.

all data => $rows
one row of data => $row
one field => $row->field_name

Practical example from mod_multiplier:

Inside "wrapper" are fields "country", and "city" and we call them by name (inside tmpl/default.php) like this:

<ul>
<?php foreach ($rows as $row):?>
  <li>
    <?php echo $row->country;?>:<?php echo $row->city;?>    
  </li>  
<?php endforeach; ?>
</ul>

How can I use a calendar field in a repeatable field in a Joomla form?

3 Answers3