3

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 input」のすべてのインスタンスを新しいインスタンスとして再初期化することです。開きたいインスタンスを実際に発生させるにはどうすればよいですか?

4

1 に答える 1

0

毎回 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();
      });
  }
});
于 2016-08-25T03:16:12.680 に答える