tempusdominus / bootstrap-4

Tempus Dominus Bootstrap 4 Datetime Picker
https://getdatepicker.com/5-4/
MIT License
609 stars 238 forks source link

Uncaught (in promise) Error: Tempus Dominus Bootstrap4's requires moment.js. Moment.js must be included before Tempus Dominus Bootstrap4's JavaScript. Meteor #204

Open nosizejosh opened 5 years ago

nosizejosh commented 5 years ago

Not sure why but the datepicker cannot seem to find the installed and properly imported moment. I have tried many variations and all still lead to missing moment errorr, meanwhile moment is used on same page and it works fine.

import moment from 'moment'; // moment = require('moment'); // import moment from 'moment-timezone'; import 'tempusdominus-bootstrap-4'; // Import this component import datetimepicker from 'tempusdominus-bootstrap-4';

// Import date picker css // import 'tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css';

Keep getting errror below

Uncaught (in promise) Error: Tempus Dominus Bootstrap4's requires moment.js. Moment.js must be included before Tempus Dominus Bootstrap4's JavaScript.

image

Also why does this need a wrapper for meteor? as an npm package it should work with meteor seemlessly, so whats the problem? any one here with a solution please?

nosizejosh commented 5 years ago

similar issues, none solves my particular case though https://stackoverflow.com/questions/49580266/tempus-dominus-bootstrap4-requires-moment-js-datetime-picker https://stackoverflow.com/questions/50949490/eonasdan-datetimepicker-for-bootstrap-v4-tempus-dominus-not-working https://stackoverflow.com/questions/47968529/how-do-i-use-jquery-and-jquery-ui-with-parcel-bundler/47984928#47984928 https://stackoverflow.com/questions/52227450/how-to-include-moment-js-for-tempus-dominus-bootstrap-with-requirejs-in-a-moodle https://stackoverflow.com/questions/50949490/eonasdan-datetimepicker-for-bootstrap-v4-tempus-dominus-not-working

ordersfg commented 5 years ago

VERY DISAPPOINTED in this datepicker. Buggy as HELL.

Eonasdan commented 5 years ago

then don't use it @ordersfg. feel free not come back

victorvbello commented 5 years ago

If you use Webpack, you can add in your config, this:

new webpack.ProvidePlugin({ moment: "moment" })

It works for me

shibbirweb commented 5 years ago

That's works for me in laravel. don't forget to add font awesome.

require('./bootstrap');

window.Vue = require('vue');
window.Event = new Vue();

/**
 * Import moment js
 */
import moment from 'moment';
Vue.prototype.moment = moment;
window.moment = moment;

/**
 * Import datetimepicker
 */
require('tempusdominus-bootstrap-4');

// Import date picker css
import 'tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css';

JQuery already added in bootstrap.js

Screenshot_1

wilberforce commented 4 years ago

For rollup:

import-modules.js:

import jquery from "jquery";
import moment from 'moment';
export default (window.$ = window.jQuery = jquery,window.moment = moment);

entry.js

import "./import-modules";

import bootstrap from 'bootstrap';
import 'tempusdominus-bootstrap-4';

import validate from 'jquery-validation';

...
leocxy commented 4 years ago

For rollup:

import-modules.js:

import jquery from "jquery";
import moment from 'moment';
export default (window.$ = window.jQuery = jquery,window.moment = moment);

entry.js

import "./import-modules";

import bootstrap from 'bootstrap';
import 'tempusdominus-bootstrap-4';

import validate from 'jquery-validation';

...

@wilberforce Your solution is working for me. I am using browserify...

wukong1024 commented 4 years ago

For rollup:

import-modules.js:

import jquery from "jquery";
import moment from 'moment';
export default (window.$ = window.jQuery = jquery,window.moment = moment);

entry.js

import "./import-modules";

import bootstrap from 'bootstrap';
import 'tempusdominus-bootstrap-4';

import validate from 'jquery-validation';

...

Thanks