Laravel + Flatpicker: Как установить с помощью NPM


Laravel + Flatpicker: Как установить с помощью NPM

19.09.2020 09:11:03 Просмотров 8 Источник

Сделал это то, что я делал до сих пор

  1. npm i flatpickr --save
  2. Добавьте @import "~flatpickr/dist/flatpickr.css"; в приложение.scss
  3. index.blade.php
@section('content')
<div class="form-group">
<label for="loaned">Loaned</label>
<input type="date" class="form-control" name="loaned" id="loaned">
</div>
@endsection

@section('scripts')
    <script>
        flatpickr('#loaned')
    </script>
@endsection

Я получаю ошибку: "flatpickr не определен". Я читал документацию, но она ... я не знаю, что делать с этой частью:

// commonjs
const flatpickr = require("flatpickr");

// es modules are recommended, if available, especially for typescript
import flatpickr from "flatpickr";
У вопроса есть решение - Посмотреть?

Ответы - Laravel + Flatpicker: Как установить с помощью NPM / Laravel + Flatpicker: How to Install using NPM

Dimitri Mostrey

19.09.2020 09:57:36

В этом случае я добавляю следующую строку в webpack.mix.js

mix.copy('node_modules/flatpickr/dist/flatpickr.css', 'public/css/flatpickr.css');

и импортируйте css-файл обычным способом.

<link rel="stylesheet" href="/css/flatpickr.css" />

Дополнение: конечно, вам нужно запустить npm run dev, и если вы используете управление версиями, добавьте файл в свой git.

Является ответом!
apokryfos

19.09.2020 10:09:14

Вы можете добавить сделать это одним из двух способов:

В вашем app.js (обычно в папке resources):

import flatpckr from 'flatpickr';
window.flatpckr = flatpckr;

Это откроет функцию flatpckr в вашем глобальном объекте window.

Альтернативой является добавление всего кода скрипта в файлы скриптов, а не в блейд-файлы, например:

import flatpckr from 'flatpickr';

// Maybe add conditions on when to run this
flatpckr('#loaned');

Таким образом, вы не "загрязняете" свой объект окна кучей библиотек без необходимости.

Помочь в развитии проекта:
Закрыть X