title: How to add Bootstrap Date Picker as Ember Component
body: <p>One of the things I struggle the most with is taking existing libraries and adding them to my Ember project. I am currently trying to add the <a href="http://bootstrap-datepicker.readthedocs.io/en/latest/" rel="nofollow noreferrer">Bootstrap Date Picker</a> as an Ember component but I can not get it to behave correctly.</p>
  
  <p>I have added the Bootstrap JS files to my Vendor folder and added the following to ember-cli-build:</p>
  
  <pre><code>app.import('vendor/datepicker/bootstrap-datepicker.min.js');
  </code></pre>
  
  <p>Then I have created a component pod called date_picker. The template for the component is as follows:</p>
  
  <pre><code>&lt;div class="input-group date" data-provide="datepicker" data-date-format="dd/mm/yyyy"&gt;
      &lt;input type="text" class="form-control"&gt;
      &lt;div class="input-group-addon"&gt;
          &lt;span class="glyphicon glyphicon-th"&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JS file for the component is currently:</p>
  
  <pre><code>import Component from '@ember/component';
  
  export default Component.extend({
  
  addDate(){
    $('.datepicker').datepicker({
      format: 'dd/mm/yyyy',
      startDate: '-3d',
      autoclose: true
  });
  }
  });
  </code></pre>
  
  <p>The component is called in the main template with <code>{{date-picker}}</code>. The above does render a date picker on the screen but one that does not behave correctly. It does not auto close for example and whilst the format is correct, it does not go cycle through months or always select the correct date on a button click.</p>
  
  <p>Is there a step I have missed in integrating this into an Ember project? </p>