Блог

Главная - Вопросы по программированию - Как разрешить $(‘.селектор’).flatpickr — это не функция?

Как разрешить $(‘.селектор’).flatpickr — это не функция?

#javascript #jquery #flatpickr

Вопрос:

Я использую jquery 3.6 и flatpickr 4.6.9 в своем проекте, но когда я пытаюсь создать экземпляр с помощью селектора jquery, он выдает сообщение об ошибке Uncaught TypeError: $datePlanted.flatpickr is not a function . Ниже приведен jquery и html-код:

jQuery

 import $ from 'jquery';
import flatpickr from 'flatpickr';

const $datePlanted = $('.plot-tree-form__date-planted-text')
$datePlanted.flatpickr({
      enableTime: false,
      dateFormat: 'Y-m-d'
    });

HTML

 <div class="plot-tree-form__form-group plot-tree-form__date-planted">
 <label for="date-planted">
    Date Planted Here
    <input type="text" class="plot-tree-form__date-planted-text" name="date-planted" placeholder="Date here"/>
 </label>
</div>

Согласно документации flatpickr, это должно работать. Как я могу решить эту проблему? Я застрял на этом очень долго. Любая помощь будет очень признательна.

Документация — https://flatpickr.js.org/getting-started/

Вот как я импортирую jquery и flatpickr в свой файл javascript введите описание изображения здесь

Комментарии:

1.1) у вас определенно есть <script src=..flatpickr... >? 2) это определенно после вашего скрипта src=jquery? и 3) у вас определенно нет другого тега сценария jquery после вашего src-скрипта flatpickr? Последнее часто случается при использовании фреймворка, такого как wordpress/asp.net-mvc, который помещает свой собственный jquery в нижней части тела.

2. Наиболее важной частью вашего кода является та часть, которая включает библиотеки jquery и flatpickr. Вы не включили эту часть в вопрос, но почти наверняка именно в этом и кроется ошибка.

3. Ваш код работает нормально, как указано. jsfiddle.net/6wars20y Так что, скорее всего, проблема с тегами сценариев.

4. Я использую npm для загрузки flatpickr, поэтому я импортировал в свой файл javascript после импорта jquery, я прикрепил скриншот в вопросе сейчас

5. @ChrisLear Я отредактировал вопрос и добавил в код, как я импортирую jquery и flatpickr, а также скриншот

Ответ №1:

У меня была та же проблема, и мое решение было таким: после ссылки на jQuery, затем обратитесь К файлам css И js для flatpickr (один за другим).:

       <script src="path/to/JQuery"></script>
      <link rel="stylesheet" href="path/to/flatpickr.css"> 
      <script src="path/to/flatpickr.js"></script>

Тогда просто:

 <input class="calendar" type="text" placeholder="Select Date..">

<script>
    $(".calendar").flatpickr();
</script>

Метки: