如何将Bootstrap日期选择器添加为Ember组件

Question

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 Bootstrap Date Picker as an Ember component but I can not get it to behave correctly.

I have added the Bootstrap JS files to my Vendor folder and added the following to ember-cli-build:

app.import('vendor/datepicker/bootstrap-datepicker.min.js');

Then I have created a component pod called date_picker. The template for the component is as follows:

<div class="input-group date" data-provide="datepicker" data-date-format="dd/mm/yyyy">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

The JS file for the component is currently:

import Component from '@ember/component';

export default Component.extend({

addDate(){
  $('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '-3d',
    autoclose: true
});
}
});

The component is called in the main template with {{date-picker}} . 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.

Is there a step I have missed in integrating this into an Ember project?

Answer 1

Have you considered using the existing addon for this? https://github.com/soulim/ember-cli-bootstrap-datepicker