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?

2 Answers 2


Based on chavab_1's answer, this answer uses Joomla's interface to create the html and adds a date dynamically when a button is clicked. I left the id field blank as it doesn't seem to be required for the calendar to work.


cal_html = <?php echo json_encode(JHTML::calendar(date("m-d-Y"),'custcal[]', '', '%m-%d-%Y',array('size'=>'8','maxlength'=>'10','class'=>' validate[\'required\']',))); ?>;


JoomlaCalendar.init((jQuery('#datelist .field-calendar').last())[0]); 

  • Welcome to JSE. If you make a mistake while posting an answer, please edit it to make the desired changes instead of deleting and posting a new answer. Commented Feb 28, 2023 at 19:58
  • Thanx for this update. Do you know if this will still work on Joomla 4? I haven't had to use the calendar, or datepicker, this way on any of my Joomla 4 sites. I was just wondering for future reference.
    – chavab_1
    Commented Mar 1, 2023 at 6:28
  • I tried to edit, but I'm not used to the editor yet and I kept messing up the formatting. This edit uses json_encode instead of str_replace. I do not know if it will work on Joomla 4. I see a number of people having issues with J4 and many extensions haven't been updated yet, so I am waiting for it to stabilize more before updating the half dozen sites I'm responsible for. Commented Mar 1, 2023 at 21:18

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:

const elements = document.querySelectorAll("#webinarSeries .field-calendar");
for (let i = 0; i < elements.length; i++) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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