将 DatePicker 对象重新绑定到 HTML 元素

Question

我有一个 SyncFusion 日期选择器，我使用如下：

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

这东西行得通，但我想在这里做一件事，但不确定是否可行。当我单击 单击此处 锚标记时，它将日期选择器绑定到 HTML 元素。当我再次单击时，它会重新绑定并重复。所以我试图重新初始化它，然后一次绑定到 HTML 元素。尝试使用 SyncFusion 文档中的 destroy()，当我使用单独的点击事件时它会破坏。

我关心的是清除附加元素并使用 单击此处 单击事件重新绑定日期选择器对象。我有什么办法可以做到吗？

Answer 1

您可以尝试调用刷新方法，该方法会再次销毁并呈现控件。参考：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');
   }
});

否则您可以检查实例，然后使用 destroy 清除附加元素并按照以下代码再次渲染它。

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

将 DatePicker 对象重新绑定到 HTML 元素

Rebind DatePicker Object To HTML Element

javascript

jquery

syncfusion

ej2-syncfusion