I recently found out that the datepicker and calendar changed a lot from 3.6 to 3.7 and as a result I'm having a problem with my custom backend component. Originally this is the code I was using to initialize my datepickers:

        inputField: $(this).attr('id'),
        ifFormat: '%m/%d/%Y',
        button: $(this).attr('id') + '_img',
        align: 'Tl',
        singleClick: true,
        firstDay: 0

I was informed that I now have to use JoomlaCalendar.init() instead of Calendar.setup.

My question is if the parameters are set the same way or if they're even the same. I looked around but I can't find much about this update.

Is there a core file that I can use as an example or something else?

1 Answer 1


After digging around, I finally found the answer or at least got it to work. Not sure if there is a better way.

First off, originally I was initializing from the input field. We now have to do it from the parent of the parent node, so the input field must be embedded inside two elements. Secondly, I was originally initializing with the id of the field, we now have to do it with the element itself; I switched from jquery to vanilla javascript.

As far as the parameters, I couldn't find any samples where the parameters were being set the old way and I couldn't get it to work by setting them that way either. So I passed the parameters as data attribute values assigned to the button that triggers the datepicker. I just copied the parameters and values from one of the jform input fields.

Here is my html:

<div class="field-calendar">                      
    <div class="input-append">                          
        <input id="jform_date1" name="jform[date][]" title="" type="text"
               aria-invalid="false" class="input-medium hasTooltip" maxlength="45"
               value="" data-original-title="" data-alt-value="0000-00-00 00:00:00">
        <button class="btn" id="jform_date1_img" type="button" data-inputfield="jform_date1"
                data-dayformat="%m/%d/%Y" data-button="jform_date_btn" data-firstday="0"
                data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="0"
                data-show-others="1" data-time-24="24" data-only-months-nav="0">
            <span class="icon-calendar"></span>

And here is my javascript:

let elements = document.querySelectorAll("#webinarSeries .field-calendar");
for (let i = 0; i < elements.length; i++) {
  • elements remains unchanged so it can be declared as const. If this successfully resolved your issue, you can accept this answer so that the system stops "bumping" it.
    – mickmackusa
    Sep 15, 2019 at 10:18
  • Sorry about that, I wasn't sure if the way I got it to work was the correct way since I'm still fairly new to Joomla that's why I was waiting for input. I'll go ahead and mark it as resolved.
    – chavab_1
    Sep 16, 2019 at 21:15
  • No worries. If someone else comes a long and knows a better way, they can post an answer and you'll be notified of the new post.
    – mickmackusa
    Sep 16, 2019 at 23:05
  • Thank you! Very helpful.
    – Yannis
    May 2, 2020 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.