如何将Bootstrap Date Picker添加为Ember组件

时间:2018-02-14 09:39:28

标签: javascript twitter-bootstrap ember.js

我最挣扎的事情之一是使用现有的库并将它们添加到我的Ember项目中。我目前正在尝试将Bootstrap Date Picker添加为Ember组件,但我无法使其正常运行。

我已将Bootstrap JS文件添加到我的Vendor文件夹,并将以下内容添加到ember-cli-build中:

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

然后我创建了一个名为date_picker的组件窗格。该组件的模板如下:

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

该组件的JS文件目前是:

import Component from '@ember/component';

export default Component.extend({

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

使用{{date-picker}}在主模板中调用该组件。上面的确会在屏幕上呈现日期选择器,但是行为不正确。它不会自动关闭,例如格式正确,它不会循环数月或总是在按钮点击时选择正确的日期。

我是否已经错过了将其整合到Ember项目中的步骤?

1 个答案:

答案 0 :(得分:1)

您是否考虑过使用现有插件? https://github.com/soulim/ember-cli-bootstrap-datepicker