Rebind DatePicker Object To HTML Element

Question

I've a SyncFusion date picker that I am using as follows:

 var datepicker = null;
 $("#datepicker").hide();
 

$("#click").click(function(){
  $("#datepicker").show();
  
  datepicker = new ej.calendars.DatePicker({ width: "255px" });
  datepicker.appendTo('#datepicker');
});

$("#clickAgain").click(function(){
 $("#datepicker").hide();
 
  datepicker.destroy();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">

 <input id="datepicker" type="text">
 
 <a id="click">Click Here</a>
 <!--<a id="clickAgain">Click Again</a>-->

This thing works but I am trying to do one thing here, though not sure if it's possible. When I click on Click Here anchor tag, it binds the date picker to HTML element. When I click again, it rebinds and gets repeated. So I am trying to reinitialize it and then bind to the HTML element once. Tried to use destroy() from SyncFusion documentation and it destroys when I use a separate click event.

My concern is to clear the appended element and rebind the date picker object using Click Here click event. Any way I can do it?

Answer 1

You can try calling refresh method, which destroys and renders the control again. Reference: https://ej2.syncfusion.com/javascript/documentation/api/datepicker#refresh

$("#click").click(function () {
   if (datepicker) {
      datepicker.refresh();
   } else {
      $("#datepicker").show();
      datepicker = new ej.calendars.DatePicker({ width: "255px" });
      datepicker.appendTo('#datepicker');
   }
});

Else you can check the instance and then clear the appended element using destroy and render it again as per the below code.

$("#click").click(function () {
    if (datepicker) datepicker.refresh();
    $("#datepicker").show();
    datepicker = new ej.calendars.DatePicker({ width: "255px" });
    datepicker.appendTo('#datepicker');
});