Search code examples
javascriptaureliasystemjsjspmbootstrap-datetimepicker

How to import 'bootstrap-datetimepicker' into Aurelia project


I'm trying to add 'Eonasdan/bootstrap-datetimepicker' into an Aurelia with typescript project and call this.birthDateDatePicker.datetimepicker(); in the "attached" method from the Aurelia life-cycle.

I added:

import $ from 'jquery'; 
import {datepicker} from 'Eonasdan/bootstrap-datetimepicker';

and there was no error, but when I try to inject like this @inject(HttpClient, json, datepicker) I get the following error:

GET http://127.0.0.1:8080/jquery.js 404 (Not Found)

I'm not sure the two libraries are loaded because I cannot find them in the sources on the browser debugger.

What am I doing wrong?

EDIT:

image with more info

The error on that line is

"Unhandled promise rejection TypeError: this.birthDateDatePicker.datetimepicker is not a function"

SOLUTION:

I've added the following imports:

import $ from 'jquery';
import 'Eonasdan/bootstrap-datetimepicker';

and manually added in the config.js the fallowing map:

"jquery":"github:components/[email protected]",

Comment/Question: I'm not sure if it's a good idea to manually add it there but I could not use it from bootstrap like in the skeleton application and I saw it was present in the global dependencies of the package.json file and found it under "jspm_packages/github/components".

Is this a correct approach?

Thanks


Solution

  • if you use aurelia-skeleton as boilerplate

    import $ from 'bootstrap';
    

    EDITED: Also use import 'Eonasdan/bootstrap-datetimepicker'; to add datetimepicker as jquery module to globals