CODEWITHSUNDEEP
javascriptaureliasystemjsjspmbootstrap-datetimepicker
Alexandru Tanasoiu
Alexandru Tanasoiu

Reputation: 21

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

Upvotes: 0

Views: 6228

Answers (2)

Jeremy Danyow
Jeremy Danyow

Reputation: 26406

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.

Upvotes: 3

valu
valu

Reputation: 1196

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

Upvotes: 0

Related Questions