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?
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');
});