JHTML::calendar() not working when apending through ajax

Question

I'm appending joomla default calender in my form through ajax. But after appending the calender, i'm unable in getting the calendar pop up on clicking the icon.

Also there is no conflict in name and id of the calendar as ids are different everytime i'm appending the calendar. So please suggest me a way of implementing it.

Answer 1

You will need to call the calendar script in your layout explicitly to make it work. Something like this:

<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>

Answer 2

1. Include joomla calendar framework before ajax call.(This is php code JHtml::_('behavior.calendar');)
2. Put following Script function and call after ajax response. Just Pass id of input without '#' character that you want to make calendar control

    function set_calendar(input_field_id)
    {
        Calendar.setup({
                // Id of the input field
                inputField: input_field_id,
                // Format of the input field
                ifFormat: "%Y-%m-%d",
                // Trigger for the calendar (button ID)
                button: input_field_id+"_img",
                // Alignment (defaults to "Bl")
                align: "Tl",
                singleClick: true,
                firstDay: 0
                });
    }