flatpickrインスタンスが開かない

Question

flatpickrカレンダーのインスタンスを使用するHTMLがあります。私がしたいのは、付随するスパンがクリックされたときに特定のカレンダーインスタンスのみを開くことです。

<div class="formRow"> 
    <div class="datetimepicker input-group date"> 
     <input id="initial-notification-date-time" name="initial-notification-date-time" type="text" class="form-control" /> 
     <span class="input-group-addon"></span> 
    </div> 
</div> 

伴うJavascriptがある：

$('.datetimepicker input').flatpickr({ 
    dateFormat: 'm/d/Y', 
    enableTime: true, 
    defaultDate: new Date(), 
    onReady: function() { 
     var flatPickrInstance = this; 
     console.log(flatPickrInstance); 
     console.log($(".datetimepicker input").siblings(".datetimepicker span")); 
     $(".datetimepicker input").siblings(".datetimepicker span").click(function() { 
      $(".datetimepicker input").flatpickr(); 
     }); 
    } 
}); 

これは現在ありませんが、「.datetimepicker入力」のすべてのインスタンスは、新しいインスタンスとして再初期化することが原因です。実際に開きたいインスタンスをどうやって作るのですか？

Answer 1

毎回flatpickrを再初期化しています。次のようなことをする必要があります：

$('.datetimepicker input').flatpickr({ 
    dateFormat: 'm/d/Y', 
    enableTime: true, 
    defaultDate: new Date(), 
    onReady: function() { 
     var flatPickrInstance = this; 
     var $flatPickrInput = $(flatPickrInstance.element); 
     $flatPickrInput.siblings("span").click(function() { 
      flatPickrInstance.toggle(); 
     }); 
    } 
});