LINUX.ORG.RU
Форум — Web-development  

Как добавить стандартный JQuery Datepicker в Laravel 5.5?

 , , mix


0

1

Пытаюсь добавить стандартный JQuery Datepicker в Laravel 5.5.

Делаю все действия вот по этой статье:

https://medium.com/@Oriechinedu/how-to-add-jquery-ui-plugin-to-a-laravel-app-...

Сбрасываю все кеши, не забываю про npm run dev.

В коде пишу:

<input type="text" class="datepicker" id="dateFrom" name="dateFrom" />
<input type="text" class="datepicker" id="dateTo" name="dateTo" />


В результате при клике на даты ничего не происходит.

Проверяю сгенерированный /public/js/app.js, в нем вижу, что вставлен компонент datepicker, и вижу что строка
$('.datepicker').datepicker();

превратилась в
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.datepicker').datepicker();


То есть, вроде как класс должен обрабатываться и обработчик должен прилепляться. Но этого не происходит. Где что еще нужно крутануть?

★★★★★

Ответ на: комментарий от goingUp

Согласно статье, я вставил

$('.datepicker').datepicker();

в файл resources/assets/js/app.js. И эта строка преобразуется в другую строку при компиляции mix.

Ошибок в консоли нет.

Но я заметил другое: если прямо в шаблоне перед полями ввода добавить:

<script>
  $('.datepicker').datepicker();
</script>


То будет ошибка: reportIncomingAndExpense:366 Uncaught TypeError: $(...).datepicker is not a function

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от gruy

Да. Я же говорю, что делал все по статье. Там JQuery UI подключается. В сгенерированном app.js есть большой блок, который реализует datepicker.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от goingUp

Еще заметил: такая ошибка (Uncaught TypeError: $(...).datepicker is not a function) будет в Cromium 73.0.3683.75. А вот в FireFox 60.8.0ESR такой ошибки не появляется.

В любом случае, datepicker не работает.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от gruy

Кажется, начал нащупывать. Поставил вчистую Laravel 5.5, сделал те же самые настройки, и вижу что datepicker работает!

Сравнил файлы:

- /resources/assets/js/app.js
- /resources/assets/sass/app.scss
- webpack.mix.js

Они в обоих проектах идентичные. Разные только файлы package.json и composer.json, потому что изначальный проект с историей. Но так и должно быть.

Начал думать, а почему на свежей инсталляции работает datepicker? Залазаю на свежей инсталляции в JS консоль, и вижу ошибку:

[Vue warn]: Cannot find element: #app

Ага, думаю. Надо бы ее исправить. Добавляю первому (оберточному) div в body новый атрибут id=«app», и ошибка эта исправилась. Но при этом datepicker молча перестал работать.

Возвращаю как было (убираю id=«app»), и datepicker снова работает.

В общем выходит, что datepicker в изначальном проекте у меня не работает из-за того, что в нем давно уже первый div в body имеет id=«app».

Отличие «неработы» datepicker в чистоустановленном Laravel в том, что, когда прописываешь id=«app», то datepicker молча не работает, то есть без ошибок. А в основном проекте, он не работает, и показывает ошибку
Uncaught TypeError: $(...).datepicker is not a function

Вот теперь не знаю, что со всем этим делать.

Xintrea ★★★★★
() автор топика
Последнее исправление: Xintrea (всего исправлений: 2)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development