如何将'bootstrap-datetimepicker'导入Aurelia项目

Question

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/jquery@2.2.0",

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

Answer 1

aha, it wasn't clear to me what you were doing when we were chatting in the gitter. I think I see the issue now...

The bootstrap-datetimepicker is a jQuery plugin, loading the module installs the plugin's functionality in jquery. It may not export anything. If it does export something, it should be the jquery object.

Try one of these:

import $ from 'Eonasdan/bootstrap-datetimepicker';

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

In any of these cases, there's no need to involve dependency injection ( @inject etc). Use the $ variable directly.

Answer 2

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