How to import 'bootstrap-datetimepicker' into Aurelia project

0
votes

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

2
javascriptaureliasystemjsjspmbootstrap-datetimepicker
no, it is not good idea, because config.js is generated file and it will be overwritten when installing project from scratch, the best way is to install jquery package as primary package, because now you have it as a dependency. jspm install jquery=github:components/jquery - valichek
Thanks for the install part, I've tried to install jquery before and got an "extraneous" error when doing so, that's why I manually updated it in the end. The config.js is generated as expected now :) - Alexandru Tanasoiu

2 Answers

0
votes

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

3
votes

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.