Search code examples
jquerybootstrap-4eonasdan-datetimepickertempus-dominus-datetimepicker

Eonasdan DateTimePicker for Bootstrap v4 (Tempus Dominus) Not Working


I am including and calling it in my Javascript file like this:

import 'moment';
import 'tempusdominus-bootstrap-4';

export default class AddHolidayPane {
    static Initialise() {
        $('#start-date').datetimepicker();
        $('#end-date').datetimepicker();
    }
}

...and it's giving me this error:

tempusdominus-bootstrap-4.js?48a1:25 Uncaught Error: Tempus Dominus Bootstrap4's requires at least moment.js v2.17.0 but less than v3.0.0
    at Object.eval (tempusdominus-bootstrap-4.js?48a1:25)
    at eval (274:2769)
    at Object.<anonymous> (Home.js:1098)
    at __webpack_require__ (Home.js:20)
    at Object.eval (AddHolidayPane.hb.js?45c2:5)
    at eval (186:119)
    at Object.<anonymous> (Home.js:951)
    at __webpack_require__ (Home.js:20)
    at eval (HomeManager.hb.js:1)
    at Object.<anonymous> (Home.js:933)

It, along with moment.js are properly referenced in my package.json file ("moment": "2.21.0").

I really have no idea why this error is being thrown given that the seemingly correct version of moment is supplied.


Solution

  • The way I have it working is having this in package.json

    "dependencies": {
        "tempusdominus-bootstrap-4": "^5.1.1"
      }
    

    in the js then use

    global.moment = require('moment');
    require('tempusdominus-bootstrap-4');
    
    //And then call datetimepicker function
    
    $('.datetimepicker').datetimepicker();
    

    should work now.

    P.S.: this is for bootstrap4