Для Tempus Dominus Bootstrap4 требуется moment.js. (выбор даты и времени)

Я пытаюсь добавить DateTimePicker с помощью Tempus Dominus Bootstrap4. Но я получаю следующую ошибку.

Для Tempus Dominus Bootstrap4 требуется moment.js. (выбор даты и времени) Я использую Laravel в качестве интерфейса. Поэтому я использую laravel-mix.

мой файл лезвия ниже

@extends('layouts.app')


@section('content')
@if ((Auth::user()->hasRole('teacher')) || (Auth::user()->hasRole('admin')) || (Auth::user()->hasRole('superadmin')) )
<div class = "container">
    <div class = "row justify-content-center">
        <div class = "col-md-8">
            <div class = "card">
                <div class = "card-header">{{__("Dashboard")}}</div>

                <div class = "card-body">
                    <p>{{ Auth::user()->name }}</p>
                    <p>{{ $errors->first('JSONerror') }}</p>   
                </div>
            </div>
        </div>
    </div>
</div>
<div class = "container">
        <div class = "row">
            <div class = "col-sm-6">
                <div class = "form-group">
                    <div class = "input-group date" id = "datetimepicker1" data-target-input = "nearest">
                        <input type = "text" class = "form-control datetimepicker-input" data-target = "#datetimepicker1"/>
                        <div class = "input-group-append" data-target = "#datetimepicker1" data-toggle = "datetimepicker">
                            <div class = "input-group-text"><i class = "fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <script type = "text/javascript">
                $(function () {
                    $('#datetimepicker1').datetimepicker();
                });
            </script>
        </div>
    </div>
@else
<div class = "container">
        <div class = "row justify-content-center">
            <div class = "col-md-8">
                <div class = "card">
                    <div class = "card-header">Authority Problem</div>
                    <div class = "card-body">
                        {{__("You do not have the authority to reach this page")}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

мой файл лезвия layouts.app:

    <!DOCTYPE html>
<html lang = "{{ app()->getLocale() }}">
<head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name = "csrf-token" content = "{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src = "{{ asset('js/app.js') }}" defer></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Fonts -->
    <link rel = "dns-prefetch" href = "https://fonts.gstatic.com">
    <link href = "https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel = "stylesheet" type = "text/css">
    <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Styles -->
    <link href = "{{ asset('css/app.css') }}" rel = "stylesheet">
    <link rel = "stylesheet" href = "{{ asset('css/fullcalendar.css') }}">
</head>
<body>
    <div id = "app">
        <nav class = "navbar navbar-expand-md navbar-light navbar-laravel">
            <div class = "container">
                <a class = "navbar-brand" href = "{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent" aria-expanded = "false" aria-label = "Toggle navigation">
                    <span class = "navbar-toggler-icon"></span>
                </button>

                <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class = "navbar-nav mr-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class = "navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li><a class = "nav-link" href = "{{ route('login') }}">{{ __('Login') }}</a></li>
                            <li><a class = "nav-link" href = "{{ route('register') }}">{{ __('Register') }}</a></li>
                        @else
                            <li class = "nav-item dropdown">
                                <a id = "navbarDropdown" class = "nav-link dropdown-toggle" href = "#" role = "button" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" v-pre>
                                    {{ Auth::user()->name }} <span class = "caret"></span>
                                </a>

                                <div class = "dropdown-menu" aria-labelledby = "navbarDropdown">
                                    <a class = "dropdown-item" href = "{{ route('logout') }}"
                                       onclick = "event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id = "logout-form" action = "{{ route('logout') }}" method = "POST" style = "display: none;">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class = "py-4">
            @yield('content')
        </main>
    </div>
    </body>
</html>

мой файл app.js:

    /**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});
Vue.config.devtools = true;

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name = "csrf-token"]').attr('content')
    }
});

мой файл bootstrap.js:

window._ = require('lodash');
window.Popper = require('popper.js').default;

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {
    alert("JQ is not loaded");
}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name = "csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     encrypted: true
// });


/* 
*For fullcalendar and reservation
*/
//import $ from 'jquery';
import 'moment';
import 'fullcalendar';
import 'tempusdominus-bootstrap-4';
import 'moment-timezone';

Файл package.json выглядит как показано ниже.

    {
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.3.1",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "popper.js": "^1.12",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "fullcalendar": "^3.9.0",
        "moment": "^2.21.0",
        "moment-timezone": "^0.5.14",
        "tempusdominus-bootstrap-4": "^5.0.0-alpha18"
    }
}

Вы можете помочь мне. Я потратил много времени на эту проблему.

Нет ответа никто не знает? Могу дать ему 10 баксов :)

— 30.03.2018 21:40

javascript jquery webpack momentjs laravel-mix

30.03.2018 21:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

8 159

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я изменил bootstrap.js, и он работает.

global.moment = require('moment');
require('tempusdominus-bootstrap-4');
import 'fullcalendar';
import 'moment-timezone';

Это сработало для меня, но вместо того, чтобы редактировать bootstrap.js, который может измениться с обновлениями Laravel, я поместил эти строки в app.js сразу после вызова начальной загрузки.

— 11.02.2020 15:02

30.03.2018 22:29

Чтобы решить эту проблему, я добавил момент в webpack.ProvidePlugin в webpack.config.js

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      moment: 'moment'
    })
  ]

20.11.2020 09:26

Другие вопросы по теме

Отключить анимацию в зависимости от размера экрана

Навигация по вкладкам jquery с помощью Tabkey

Как удалить пробел при маскировке jquery

CSS преобразования и преобразования

Запрос Ajax не работает, когда загружено больше файлов

Автозаполнение jquery при вставке даже

Несколько скриптов Ajax на странице

Не может требовать webpack для webpack.config

Как программно запустить ввод фильтра YADCF с помощью jQuery?

Как добавить новое текстовое поле на основе выбора из раскрывающегося списка с помощью angularjs?

Для Tempus Dominus Bootstrap4 требуется moment.js. (выбор даты и времени)

Ответы 2

Другие вопросы по теме

Похожие вопросы