Make calendar dynamically in 3.7

Question

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?

Answer 1

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.

jQuery('#add_date').click(function()
{

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

jQuery('#datelist').append(cal_html);

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

});

Answer 2

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>
        </button>
    </div>
</div>

And here is my javascript:

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