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

这件事有效，但我正在尝试做一件事，尽管不确定这是否可能。当我单击click Here锚点标记时，它会将日期选择器绑定到HTML元素。当我再次点击时，它会重新绑定并重复。因此，我尝试重新初始化它，然后绑定到HTML元素一次。尝试使用SyncFusion文档中的destroy()，当我使用单独的单击事件时，它会破坏。

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

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