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

【问题标题】：Rebind DatePicker Object To HTML Element将 DatePicker 对象重新绑定到 HTML 元素
【发布时间】：2021-11-09 06:46:49
【问题描述】：

我有一个 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>-->

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

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

【问题讨论】：

标签： javascript jquery syncfusion ej2-syncfusion

【解决方案1】：

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

【讨论】：