Using Eonasdan's bootstrap-datetimepicker w/ Elixir

The datepicker package grabs a copy of moment when you npm install. You shouldn't have to do it manually. When strange things like that happen to me, I usually delete the node_modules directory and npm install...or better yet...run yarn.

Having a similar challenge,

npm i eonasdan-bootstrap-datetimepicker

Dumped my node_modules and ran npm install.

I now have added the code snippet from the docs. I have this in my view;

<div class='input-group date' id='datetimepicker3'>
       <input type='text' class="form-control" />
       <span class="input-group-addon">
           <span class="glyphicon glyphicon-time"></span>
        </span>
</div>

and this in my layout;

<!-- Scripts -->
<script src="{{ asset('/js/app.js') }}"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker3').datetimepicker({
            format: 'LT'
        });
    });
</script>

This is a fresh 5.3 install,

I get this error;

jquery.js?27d9:3855 Uncaught TypeError: $(...).datetimepicker is not a function(…)

So it looks like somehow I am calling the requirements (or not) incorrectly.

Does someone have a step by step for this when using 5.3 and the boiler gulpfile.js setup?

Thanks!

Are you sure datetimepicker is combined in app.js? You should open it up and search for "jQuery" first, then search for "datetimepicker". Order matters in this case.

Hmm. So jQuery is combined and in app.js but datetimepicker is not...

Feeling very lost suddenly.

I have pulled in the package via npm.

The I have this in my gulpfile.js;

elixir(mix => { mix.sass(['app.scss', 'bmi.scss']) .webpack('./node_modules/moment/src/moment.js','./node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js','app.js'); });

Doesn't seem to be compiling the packages. Obviously this isn't how it should be done?

Added the []

elixir(mix => { mix.sass(['app.scss', 'bmi.scss']) .webpack(['./node_modules/moment/src/moment.js','./node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js'],'app.js'); });

no errors in gulp but no compile either...

Also trying this with no luck...

elixir(mix => { mix.sass(['app.scss', 'bmi.scss']) .webpack('app.js') .combine(['node_modules/moment/src/moment.js', 'node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js'], 'public/js/vendor.js'); });

@RushVan you can require both datetimepicker and moment in your bootstrap.js file and just run webpack on app.js.

window.moment = require('moment');
window.moment.locale('en');

require('eonasdan-bootstrap-datetimepicker');

Ok, I have added that to my assets/js/app.js.

So all I am now including is js/app.js in my layout. Still getting the 'datetimepicker not a function' error.

As I understood it, between the boiler app.js and pulling in the datepicker package, all of these are now available...

All of this in bootstrap - jquery.js moment.js transition.js collapse.js bootstrap.min.js

This in datetimepicker - bootstrap-datetimepicker.min.js

Maybe not?

Well only two thing can cause the issue off the top of my head.

1. datetimepicker is defined before jQuery so the error is thrown
2. datetimepicker is not compiled properly by webpack or is not included. Note: you should use unminified versions so that no clashing of single letter variables are present.

Please post your gulpfile, app.js and bootstrap.js.

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

/* |-------------------------------------------------------------------------- | Elixir Asset Management |-------------------------------------------------------------------------- | | Elixir provides a clean, fluent API for defining some basic Gulp tasks | for your Laravel application. By default, we are compiling the Sass | file for our application, as well as publishing vendor resources. | */

elixir(mix => { mix.sass(['app.scss', 'bmi.scss']) .webpack('app.js'); });

app.js

/**

• First we will load all of this project's JavaScript dependencies which
• include Vue and Vue Resource. This gives a great starting point for
• building robust, powerful web applications using Vue and Laravel. */

require('./bootstrap');

/**

• Next, we will create a fresh Vue application instance and attach it to
• the body of the page. From here, you may begin adding components to
• the application, or feel free to tweak this setup for your needs. */

/*Vue.component('example', require('./components/Example.vue'));

const app = new Vue({ el: 'body' });*/

window.moment = require('moment'); window.moment.locale('en');

require('eonasdan-bootstrap-datetimepicker');

bootstrap.js

window._ = require('lodash');

/**

• 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. */

window.$ = window.jQuery = require('jquery'); require('bootstrap-sass');

/**

• Vue is a modern JavaScript library for building interactive web interfaces
• using reactive data binding and reusable components. Vue's API is clean
• and simple, leaving you to focus on building your next great project. */

window.Vue = require('vue'); require('vue-resource');

/**

• We'll register a HTTP interceptor to attach the "CSRF" header to each of
• the outgoing requests issued by this application. The CSRF middleware
• included with Laravel will automatically verify the header's value. */

Vue.http.interceptors.push((request, next) => { request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;

next();

});

/**

• 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.Echo = new Echo({ // broadcaster: 'pusher', // key: 'your-pusher-key' // });

You are using Vue 1.0 and the code looks correct. If datetimepicker is not include, try changing the require to bootstrap-datetimepicker. Maybe webpack is not finding it but it should throw an error if not.

I found this loading order in the docs:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/moment.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/transition.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/collapse.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap-datetimepicker.min.js"></script>

show any error message.

Yes, saw the order. Not sure how to determine if things get 'webpacked' in that order. Any require other than eonasdan-bootstrap-datetimepicker seems to throw an error.

I realize webpack is intended to improve efficiency but similar to the original poster's feelings, this seems more work that it's worth. I am tempted to just manually pull the files and set them in the right order and get back to work!

Surely I can't be the only one trying to use a datetimepicker with L5.3??

Actually, it does work very well. It works best with the non-minified files and only being run once. The use of require statements make it really easy. However, there should be an error message if it can't find the file.

It would seem that your webpack output file, app.js (look in the eval() section for the file being received by require statement). The order in webpack varies but they should be there...jquery, bootstrap, datetimepicker and app.

I have used it previously with no issues but no one was using webpack back then.

Funny, if I look in output app.js, datetimepicker by any name does not seem to be getting compiled. moment.js is. So, must be an issue with the package I pulled in. I'll start all over.

Pulled just the bootstrap-datetimepicker file in and skipped webpack. Works fine. Need to make some hay so I'll come back to this issue another time.

Thanks for the help!

Ok, if any of the task data is highlighted in red, there is a problem that doesn't have a specific exception to throw. So, in your case you might have public/app.js with a red background signifying an error.

I was able to load it by putting these line in bootstrap.js

window.moment = require('moment');
window.moment.locale('en');

window.datetimepicker = require('eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js');

I verified it was in app.js after running through webpack.

Thank you @ejdelmonico. I tested with different methods and yours is the one that worked.