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

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

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

https://medium.com/@Oriechinedu/how...-a-laravel-app-using-laravel-mix-e85bf0244fc1

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

В коде пишу:

Код (Text):

1.  
2. <input type="text" class="datepicker" id="dateFrom" name="dateFrom" />
3. <input type="text" class="datepicker" id="dateTo" name="dateTo" />

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

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

Код (Text):

1.  
2. $('.datepicker').datepicker();

превратилась в

Код (Text):

1.  
2. jquery__WEBPACK_IMPORTED_MODULE_0___default()('.datepicker').datepicker();

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

 

Ошибок в консоли при открытии страницы нет. При клике на поле тоже ошибок нет.

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

Код (Text):

1.  
2. <script>
3.   $('.datepicker').datepicker();
4. </script>

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

А если оставить только селектор, без .datepucker() , то ошибки нет. То есть JQuery работает, оно у меня и в других местах работает, проблема именно в привязке datapicker.

 

> в привязке datapicker

Имел в виду datepicker. Даже проверил весь код, нет ли где опечатки. Нет, везде именно datepicker.

 

Еще заметил: такая ошибка будет в Cromium 73.0.3683.75. А вот в FireFox 60.8.0ESR такой ошибки не появляется.

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

 

Блин, я тут чистому Mix ума дать не могу. Делать еще одну прослойку - это за гранью понимания.

По теме вопроса - в буржуинонете говорят, что топиковая проблема возникает если JQuery UI подключен раньше JQuery. Но как в случае Mix управлять последовательностью - мне непонятно. Сейчас файл resources/assets/js/app.js выглядит так:

Код (Text):

1.  
2. require('./bootstrap');
3.  
4. import $ from 'jquery';
5. window.$ = window.jQuery = $;
6. import 'jquery-ui/ui/widgets/datepicker.js';
7. $('.datepicker').datepicker();
8.  
9. window.Vue = require('vue');
10.  
11. Vue.component('example-component', require('./components/ExampleComponent.vue'));
12.  
13. const app = new Vue({
14.   el: '#app'
15. });

Может, тут что-то надо изменить?

 

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

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

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

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

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

Код (Text):

1.  
2. [Vue warn]: Cannot find element: #app

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

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

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

Отличие "неработы" datepicker в чистоустановленном Laravel в том, что, когда прописываешь id="app", то datepicker молча не работает, то есть без ошибок. А в основном проекте, он не работает, и показывает ошибку

Код (Text):

1.  
2. Uncaught TypeError: $(...).datepicker is not a function

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

 

Да, конечно. И у меня Vue c JQuery нормально уживались до сегодняшнего момента. Проблема появилась при попытке использовать JQuery UI с его Datepicker.

 

Я ставлю datepicker на элемент, который просто есть в HTML-коде. Но этот элемент находится внутри элемента с id="app",который контролирует vue.