Using Boostrap DateTimePicker with ember

See more:

ASP.NET

Javascript

jQuery

Hey guys, I have this on my index:

<script type="text/x-handlebars" data-template-name="components/datetime-picker">
        <div class="form-group">
            <div class='input-group date'>
                {{#if iconOnRight}}
                <input type='text' {{bind-attr placeholder=placeholder}} class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                {{else}}
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                <input type='text' {{bind-attr placeholder=placeholder}} class="form-control" />
                {{/if}}
            </div>
        </div>
    </script>

and I'm calling it like this:

<div>
                                    <label for="inputEventStart">2.4. Event/Meeting start date and time (*):</label>
                                    {{datetime-picker datetime=EventStartDate iconOnRight=false}}
                                </div>

this is the code for the component:

App.DatetimePickerComponent = Ember.Component.extend({
    pickerWrapper: null,
    pickerData: null,
    classNames: ['input-small'],
    format: "DD/MM/YYYY HH:mm",
    placeholder: Ember.computed.alias('format'),
    iconOnRight: true,

    /**
     * Create function */
    didInsertElement: function () {
        var self = this;
        var format = this.get('format');

        var pickerWrapper = this.$().datetimepicker({
            format: format
        });
        this.set('pickerWrapper', pickerWrapper);

        var pickerData = pickerWrapper.data("DateTimePicker");
        this.set('pickerData', pickerData);

        if (this.get('datetime'))
            pickerData.setDate(this.get('datetime'));

        pickerWrapper.on('dp.change', function (ev) {
            //self.sendAction('action', ev.format());
            self.set('datetime', ev.date);
        });

    },

    datetimeChanged: function () {
        // get model datetime
        var modelDatetime = this.get('datetime');
        // get picker datetime
        var picker = this.get('pickerData');
        var pickerDatetime = picker.getDate();
        // if not the same the overwrite model over picker
        if (modelDatetime != pickerDatetime) {
            picker.setDate(modelDatetime);
        }
    }.observes('datetime')

});

What's happenning is that the input is there with the glyphicons and all but the picker doesn't show when I click on the input... most of this code I got from someone else since I'm really new to ember to I guess the problem will be something like the way things are connected or how I'm implementing them... help please.