Including Third party dependencies inside Kibana Plugin?

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.

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.?

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:

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!

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

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.

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. :frowning:

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. :slight_smile:

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

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! :slight_smile:

Thanks @cjcenizal for your valuable feedback.