Flatpickr Datepicker имеет проблемы с доступностью клавиатуры и ее поведением при использовании внутри модального bootstrap - PullRequest
Новая
       91

Flatpickr Datepicker имеет проблемы с доступностью клавиатуры и ее поведением при использовании внутри модального bootstrap

0 голосов
/ 26 февраля 2020

Использование Flatpickr Datepicker внутри Bootstrap модально - фокус на вкладке и выбор дат с помощью кнопок со стрелками на клавиатуре, которые больше не работают.

REPRO LINK https://jsfiddle.net/pLxhn0d7/

HTML

  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Use Datepicker</h4>
        <button type="button" class="cls close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body p-4">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label for="ac3" class="control-label">Select Date</label>
              <input type="text" id="ac3" name="ac3" class="form-control date" placeholder="Select date" required>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary waves-effect cls" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div><!-- /.modal -->

<article>
  <input type="text" placeholder="Select Date.." class=date>
</article>
<br><br>
<button  data-toggle="modal" data-target="#acon">
  Launch Modal
</button>

Javascript

const fp = flatpickr(".date", {
dateFormat:"d-m-Y"
});

Сведения об окружающей среде:

  • Используемая версия Flatpickr: 4.5.4
  • Имя и версия браузера: Google Chrome 79.0.3945.130 (Официальная сборка)
  • ОС и версия: Windows 10 Pro 64-bit
...