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:

$("input[name^='jform[date]']").each(function(index){ Calendar.setup({ 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? Any help would be appreciated.



After digging around I finally found the answer or at least got it to work. Not sure it 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 it the input field must be embedded inside two elements. Secondly, I was originally initializing with the id of the field, we now how 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 were they 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++) {

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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