Rebind DatePicker Object To HTML Element


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?

Source: JavaSript – Stack Overflow

September 14, 2021
Category : News
Tags: ej2-syncfusion | javascript | jquery | syncfusion

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.