0

我有一个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 click 事件重新绑定日期选择器对象。我有什么办法可以做到吗？

4

1 回答 1

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');
});
于 2021-09-15T10:39:46.783 回答