How to add date picker or any general jQuery plugin to Ember-CLI App

Question

So I am trying to add pikaday date picker to Ember-CLI app.

I've got the following in my /app/views/calendar-view.js

import Ember from 'ember';

export default Ember.TextView.extend({
    modelChangedValue: function(){
        console.log(this.get('value'));
    }.observes("value"),

    didInsertElement: function(){
        currentYear = (new Date()).getFullYear();
        formElement = this.$()[0];
        picker = new Pikaday({
            field: formElement,
            yearRange: [1900,currentYear+2]
        });
        this.set("_picker", picker);
  },

    willDestroyElement: function(){

        picker = this.get("_picker");

        if (picker) {
            picker.destroy();
        }

        this.set("_picker", null);
  }

});

My main issue is how to add the plugin itself into ember-cli?

This is the github link for pikaday: https://github.com/dbushell/Pikaday

More specifically I think this part might be important since Ember-CLI uses AMD: https://github.com/dbushell/Pikaday#amd-support

So how do I add the plugin itself to ember-cli?

Answer 1

Update

Since writing this answer, the Ember Addon API has become more usable and are a perfect option if you're building an Ember component/mixin/other class that adds to the regular js plugin.

Regular install

In a 'regular install' situation, you want the plugin to be available through your app and be included in the app's payload no matter what. To do this, add the file/package to your project's vendor directory. There are two immediately available ways to do this: use Bower or simply save a file or package in the directory.

1) Bower

Use Bower to install the package either through the terminal, like:

bower install ember-validations

Or, if there is no easy-install Bower package available, in your bower.json file:

{
  "name": "app",
  "dependencies": {
    "chosen": "https://github.com/harvesthq/chosen/releases/download/v1.1.0/chosen_v1.1.0.zip"
  }
}

2) Writing a file

You don't have to use Bower to add files and directories to your vendor directory. You could create a file anywhere inside the vendor directory, copy and paste the plugins javascript into it and save it, and it will still be available to import into your app.

3) Making it available in your app

Regardless of the method through which you create and save the plugin scripts, you have to still have to import the file directly into your app. You do this in Brocfile.js. Add an import with the path to the file (main file if it's a bower installed package) just before module.exports = app.toTree();.

app.import('vendor/ember-validations/index.js');
app.import('vendor/chosen/chosen.jquery.min.js');

There's more info in the Managing Dependencies section of the ember-cli docs.

Polyfill or other non-essential plugins

There are some situation in which you don't want to always load/run a script in your app. For example, you are loading a large polyfill only when the user is using IE. In this situation, you can create a directory in public/assets to hold the javascript files and load them using jQuery's $.getScript() method in an initializer or somewhere else within your Ember app.

I answered a similar question about that kind of scenario here.