时间戳

首页 > 解决方案 > 如何在 Laravel 项目中使用“bootstrap-datetimepicker”？

laravel - 如何在 Laravel 项目中使用“bootstrap-datetimepicker”？

问题描述

我有一个 Laravel 5.6 基础项目。我正在尝试使用Laravel Mix来编译我的所有js/css资源。

我想使用一个 javascript datetime-picker，它允许我在我的页面上创建一个 datetime-picke 和一个范围选择器。由于我使用 css-bootstrap 框架进行样式设置，因此我想使用bootstrap-datetimepicker。我很难尝试使用我的 Mixer 设置来安装这个项目。

这是我webpack.mix.js文件中的代码，

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .scripts([
            'bower_components/eonasdan-bootstrap-datetimepicker/build/js/tempusdominus-core.min.js'
        ], 'public/js/app_addons.js')
   .sass('resources/assets/sass/app.scss', 'public/css');

在resources/assets/js/app.js文件中，我添加了以下代码

window.datetimepicker = require('../../../bower_components/eonasdan-bootstrap-datetimepicker/build/js/tempusdominus-core.min.js');

但是在浏览器的控制台中，我收到以下错误

TypeError: $(...).datetimepicker 不是函数

如何在我的 laravel-mix 中正确包含bootstrap-datetimepicker ？

标签： laravellaravel-5bootstrap-datetimepickerlaravel-mixeonasdan-datetimepicker

解决方案

我认为这应该有效：

  1. 删除关于datetime-pickerin的引用webpack.mix.js：

    const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

  2. 将文件复制bower_components/eonasdan-bootstrap-datetimepicker/build/js/tempusdominus-core.min.js到resources/assets/js/tempusdominus-core.js

  3. 将此添加到app.js：

    window.jQuery = window.$ = $ = require('jquery');
window.datetimepicker= require('./tempusdominus-core')($);
//or require('./tempusdominus-core');

希望能奏效

推荐阅读