Install jQuery plugins in ember-cli

Question

I need to install this timePicker in ember-cli.

I have added library in vendor folder and imports in Brocfile.js:

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();

app.import('vendor/timePicker/jquery-ui-timepicker-addon.js');
app.import('vendor/timePicker/jquery-ui-sliderAccess.js');

module.exports = app.toTree();

I have created components/jquery-ui-timepicker-addon.js:

import Em from "ember";
export default Em.TextField.extend({
  dateFormat:'yy-mm-dd',
  timeFormat: 'HH:mm:ss',
  stepHour: 1,
  stepMinute: 1,
  stepSecond: 1
});

and I need to call this from a template, but I don't know how.

I suppose that the code is something similar to:

 {{jquery-ui-timepicker-addon}}

but nothing happens.

Could you help me?

Regards.

Answer 1

You need to invoke the jQuery plugin at the time Ember put the component in the DOM. The hook is called didInsertElement

Do it like this:

import Em from "ember";
export default Em.TextField.extend({
  setupTimepicker: function() {
    this.$().timepicker({
      dateFormat:'yy-mm-dd',
      timeFormat: 'HH:mm:ss',
      stepHour: 1,
      stepMinute: 1,
      stepSecond: 1
    )}
  }.on('didInsertElement')
});

An explanation of this.$(): The this refers to the component and the $() returns the element as a jQuery object. So this.$() means the component as a jQuery object. Once you have a the element as a jQuery object then you can invoke the jQuery plugin. But you need to wait until Ember has added the element to the DOM before you have access to the element.