# Including Third party dependencies inside Kibana Plugin?

**URL:** <https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213>\
**Category:** Kibana\
**Created:** [August 4, 2016, 12:09pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213 "2016-08-04T12:09:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harinath](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/harinath/32/58639_2.png) [@Harinath](https://discuss.elastic.co/u/Harinath)\
**Post date:** [August 4, 2016, 12:09pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/1 "2016-08-04T12:09:27Z")

</div>

I am developing kibana plugin of type App in Kibana 4.5.X. I need to include the date picker [https://github.com/Eonasdan/bootstrap-datetimepicker](https://github.com/Eonasdan/bootstrap-datetimepicker).

How to include the JavaScript file properly, before loading this datetimepickerfile, I need to include jquery, bootstrap. Any help would be really helpful.

Can anyone please share some example code.?

---

<div class="post-metadata">

**Author:** ![cjcenizal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cjcenizal/32/11216_2.png) [@cjcenizal](https://discuss.elastic.co/u/cjcenizal)\
**Post date:** [August 4, 2016, 8:23pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/2 "2016-08-04T20:23:07Z")

</div>

Hey there, it looks like this datetimepicker is available via NPM as well as bower. I suggest you install it and its dependencies with NPM. Because kibana uses webpack to build its bundles, you can then just `require` these files:

```auto
require('jquery');
require('bootstrap');
require('eonasdan-bootstrap-datetimepicker ');

```

At least in theory! Please try this out and let me know if it helps you. Thanks!

---

<div class="post-metadata">

**Author:** ![cjcenizal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cjcenizal/32/11216_2.png) [@cjcenizal](https://discuss.elastic.co/u/cjcenizal)\
**Post date:** [August 4, 2016, 8:25pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/3 "2016-08-04T20:25:43Z")

</div>

Just a note: I think webpack will search for your bower components too, if you'd rather install dependencies with bower.

---

<div class="post-metadata">

**Author:** ![cjcenizal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cjcenizal/32/11216_2.png) [@cjcenizal](https://discuss.elastic.co/u/cjcenizal)\
**Post date:** [August 4, 2016, 8:28pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/4 "2016-08-04T20:28:24Z")

</div>

Aaaand another thing... here's a list of known plugins that you can refer to for guidance and inspiration: [https://github.com/elastic/kibana/wiki/Known-Plugins](https://github.com/elastic/kibana/wiki/Known-Plugins).

---

<div class="post-metadata">

**Author:** ![Harinath](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/harinath/32/58639_2.png) [@Harinath](https://discuss.elastic.co/u/Harinath)\
**Post date:** [August 8, 2016, 11:12am UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/5 "2016-08-08T11:12:32Z")

</div>

Thanks for the reply @cjcenizal  
I could now able to include jquery and bootstrap and eonsadan-bootstrap-datetimepicker but dont know how to use inside the application

My index.html

```
  <div class="row">
    <div class='col-md-4'>
      <label for="sel1" >End Date</label>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker2' ng-model="EndDate">
            <input type='text' class="form-control" ng-value="DefaultTime" ng-model="EndDate" id="usertodate" />
              <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
              </span>
          </div>
        </div>
      </div>
    </div>
</div>

```

my app.js  
`var $ = require('jquery');  
require('bootstrap');  
import moment from 'moment';  
require('eonasdan-bootstrap-datetimepicker');  
import chrome from 'ui/chrome';  
import uiModules from 'ui/modules';  
import uiRoutes from 'ui/routes';  
uiModules  
.get('app/hikapp', [])  
.controller('hikappHelloWorld', function ($scope, $route, $interval, $http, $routeParams) {

$(function () {$('#datetimepicker2').datetimepicker();})  
};  
`

It throws me error $(...).datetimepicker is not a function.  
Could you please point a right way to use it. ☹

If I include by import statement by explicitly to obtain css and js  
import './bootstrap-datetimepicker.css';  
import './bootstrap-datetimepicker.js';

Date Picker works perfectly. 🙂

---

<div class="post-metadata">

**Author:** ![cjcenizal](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cjcenizal/32/11216_2.png) [@cjcenizal](https://discuss.elastic.co/u/cjcenizal)\
**Post date:** [August 8, 2016, 4:21pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/6 "2016-08-08T16:21:53Z")

</div>

I'm sorry if I'm mis-understanding, but it sounds like you're saying that this works:

```auto
import './bootstrap-datetimepicker.css';
import './bootstrap-datetimepicker.js';

```

Is that right? If so, then I think that's fine way to do it, as long as it works! 🙂

---

<div class="post-metadata">

**Author:** ![Harinath](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/harinath/32/58639_2.png) [@Harinath](https://discuss.elastic.co/u/Harinath)\
**Post date:** [August 8, 2016, 6:03pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/7 "2016-08-08T18:03:34Z")

</div>

Thanks @cjcenizal for your valuable feedback.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [July 6, 2017, 1:41pm UTC](https://discuss.elastic.co/t/including-third-party-dependencies-inside-kibana-plugin/57213/8 "2017-07-06T13:41:42Z")

</div>