Joomla-cms: Calendar doesn't appear in Modal View

Created on 28 Aug 2017 · 11Comments · Source: joomla/joomla-cms

Steps to reproduce the issue

View is loaded in a modal
Complete View is rendered successful
also Calendar Input Field and Button are rendered

Expected result

Click on Button should show calendar popup for select a date

Actual result

Click on Button doesn't show calendar popup
no select possible

System information (as much as possible)

Joomla! 3.7.4 and Joomla! 3.7.5

Additional comments

successful worked on Joomla! 3.6.5 before update to Joomla! 3.7.x

No Code Attached Yet

Source

michaelulm

All 11 comments

Can you be more specific , which view ? of which component ?
frontend , backend ? both of them ?
any calendar enhancing extensions installed ? are they updated to latest version ?

ggppdk on 28 Aug 2017

👍1

it's a custom component, not public available.
it's in frontend
no enhancing extensions installed, only Joomla! calendar is used.

like described before we had no problems at all until Joomla! 3.6.5, but after Update to 3.7.x we recognized that the Popup doesn't appear after click on calendar button.

yesterday I've tried to init calendar setup manually and the popup appears, but it doesn't write back the selected date. so maybe it's a similiar problem to https://github.com/joomla/joomla-cms/issues/15972 (?)

michaelulm on 28 Aug 2017

can you share you snippet that you use to init the calendar?
Is it a form or plain html?

dgrammatiko on 28 Aug 2017

👍1

                       <script>
                            jQuery(document).ready(function($) {
                                Calendar.setup({
                                    // Id of the input field
                                    inputField: '<?php echo $field->id; ?>',
                                    // Format of the input field
    //                                ifFormat: '<?php //echo $field->format; ?>//',
                                    // Trigger for the calendar (button ID)
    //                                button: '<?php //echo $field->id; ?>//_img',
                                    // Alignment (defaults to "Bl")
   //                                    align: 'Tl',
                                    singleClick : true,
                                    firstDay: '<?php echo JFactory::getLanguage()->getFirstDay(); ?>'
                                });
                            });
                        </script>

I've used this script for init the calendar (again) and popup appears, but selected date wasn't inserted, but field got blank (before the rendered page correctly display a pre-loaded date from database)

michaelulm on 28 Aug 2017

There was some discussion about this in this issue tracker
e.g.
https://github.com/joomla/joomla-cms/issues/15574
https://github.com/joomla/joomla-cms/issues/15251

you need to use

JoomlaCalendar.init(someDOMElement);

also input TAG descedants of someDOMElement will be initialized as calendars

you need something like (test and make any correction needed)

<script>
  jQuery(document).ready(function($) {
    var input = document.getElementById('<?php echo $field->id; ?>';
    var inputParent = input.parentNode;  // or input.parentNode.parentNode
    JoomlaCalendar.init(inputParentContainer);
  });
</script>

(for more, since you are developer study)
/media/system/js/fields/calendar.js

ggppdk on 28 Aug 2017

👍1

Also to be able to pass configuration to the calendar you need to add

data-*
data-show-time="1"

attributes to the button-tag after the input-tag

see here:
/layouts/joomla/form/field/calendar.php

Now if you did not need to call calendar JS in custom code,
and you only needed calendar on page load, then you could have used Joomla API

...
$attribs['todayBtn'] = 1;
$attribs['weekNumbers'] = 1;
$attribs['showTime'] = 1;
echo JHTML::_('calendar', $date, $fieldname, $elementid, $date_time_format, $attribs);
...

in which case nothing would have broken as JHTML::_('calendar'...) is compatible to legacy calls of it

ggppdk on 29 Aug 2017

@ggppdk is right you should be using the

echo JHTML::_('calendar', $date, $fieldname, $elementid, $date_time_format, $attribs);

instead of trying to setup the calendar manually.

dgrammatiko on 29 Aug 2017

jQuery(document).ready(function($) {
...

indeed your example above, shows that you are setting up the calendar on document ready
-- so you had no reason not to use the API , and avoid these problems

There are developers using calendar JS directly (me included) but we have updated our code for J3.7.x

Also in all cases of using it on document ready, it is best to use API
instead of calling it directly

This is not a bug , this can be closed,

for more you may post in developers forums
but you do not need to, just study the above code examples and the above mentioned files

ggppdk on 29 Aug 2017

Set to "closed" on behalf of @franz-wohlkoenig by The JTracker Application at issues.joomla.org/joomla-cms/17738

joomla-cms-bot on 29 Aug 2017

closed as stated above.

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/17738.}

ghost on 29 Aug 2017

thank you for your help!
first of all, there are some hints, which helped me to find a solution for that problem. but in my opinion there is a bug since version 3.7.x, because I've not changed parts of that code since upgrading and I don't think that is necessary. In other parts of my implementation the calendar selection works well.

my script above (in my comment before) was just one of the last trial to fix that bug for my view, but it doesn't help like I mentioned (it only shows the popup). now I describe the solution I found with your help (thank you again for quick responses):

...
        <!-- add tab set for section licence-->
        <?php echo JHtml::_('bootstrap.addTab', 'myTab', 'licence', JText::_('COM_FACPMANAGEMENT_USER_ACCOUNT_LICENCE', true)); ?>

        <?php

        foreach ($fieldSetLicence as $field) : ?>
            <div class="control-group">
                <div class="control-label">
                    <?php echo
                        $field->label; // will render field names
                    ?>
                </div>
                <div class="controls <?php if(strtolower($field->type) == 'textarea'): echo strtolower($field->type); endif;?>">
                    <?php

                        echo $field->input; // will render all input fields

                        // start of workaround after upgrading to Joomla! 3.7.x
                        if($field->type == "Calendar") { // only init calendar if it's needed
                            JFactory::getDocument()->addScriptDeclaration("
                            jQuery(document).ready(function (){
                                var input = document.getElementById('".$field->id."');
                                var inputParent = input.parentNode;
                                JoomlaCalendar.init(inputParent);
                            });");
                        }
                        // end of workaround
                    ?>
                </div>
            </div>
        <?php
        endforeach;
        ?>
        <?php echo JHtml::_('bootstrap.endTab'); ?>
...

my fault was that I've forgot to mention that I'm also using bootstrap tabs for my details view. The View Fields are definied in xml and will be loaded by the view. (because of critical data I've to hide some other fields)

grafik

now a click on the calendar buttons works again, previously without this workaround only the input field and the button was rendered and no selection appears.

grafik