Calendar icon added multiple times

[Gayithri]

I have a textbox that I am converting to calendar picker on the JS side. This control is on a Bootstrap Modal popup.

The control looks fine on the initial load , once I cancel and reopen the dialog I see additional icon getting added. The count increases every time I open the popup.

How do I prevent it from appending , I have tried setting the obj to null and recreating , but didn't work for me.

Here is my sample code 

$('#editUserModal').modal('show').on('shown.bs.modal', function () {

  let hiredate = new ej.calendars.DatePicker({

                max: new Date()

          });

// how to check here append only if already not appened ?

          hiredate.appendTo('#hiredate'); // Hiredate is a text box on the modal

}

[Prince Oliver]

Hi Gayithri, 

Thank you for contacting us. 

You can resolve the issue by following ways. 

1. Directly add rendering code of the calendar component in the page load instead of modal shown event.
   
   

$(function () { 

    var hiredate = new ejs.calendars.DatePicker(); 

    hiredate.appendTo('#hiredate'); 

}); 

$('#editUserModal').modal('show'); 

Sample: https://stackblitz.com/edit/js-71gkm6?file=index.js

 

2. Check whether the hiredate variable is empty or not, before rendering again.
   
   

let hiredate; 

$('#editUserModal').modal('show') 

    .on('shown.bs.modal', function () { 

        if (!hiredate) { 

            hiredate = new ej.calendars.DatePicker({ 

                max: new Date() 

            }); 

            hiredate.appendTo('#hiredate'); 

        } 

    }); 

 

Sample: https://stackblitz.com/edit/js-4jvb1z?file=index.js 

Please let us know if you need any further assistance on this. 

Regards, 

Prince