Using jQuery UI Widgets in Aurelia

Last updated: March 15, 2017

When it comes to adding in on-page functionality in the form of custom selects, autocomplete fields and more, jQuery UI is still an undisputed popular choice amongst some developers and using it within Aurelia is super simple.

Because Aurelia does not replace your HTML or parse it any differently than your browser does without Aurelia, it allows you to use any third party library or plugin inside of your Aurelia application without worrying about it messing with anything.

In this article, we will be showing you how to use the jQuery UI Datepicker component. The basics learned here will apply to any jQuery UI or even third party library.

For the sake of this example, we are going to be creating a custom element which will be used by calling: <jquery-ui-datepicker></jquery-ui-datepicker> in any HTML view in our application.

Before we proceed, make sure you install jQuery and jQuery UI:

npm install jquery jquery-ui --save

The custom element

Our custom element supports naming our date picker, as well as supplying the standard options object when instantiating the plugin. Go ahead and save the following file as jquery-datepicker.js in your src directory.

import { customElement, bindable, inject } from 'aurelia-framework';

import 'jquery';
import { datepicker } from 'jquery-ui';

@customElement('jquery-ui-datepicker')
@inject(Element)
export class JqueryUiDatepicker {
    @bindable id = '';
    @bindable name = '';
    @bindable options = {};

    constructor(Element) {
        this.element = Element;

        if (!this.id && this.name) {
            this.id = this.name;
        }

        if (!this.name && this.id) {
            this.name = this.id;
        }
    }

    attached() {
        $(`#${this.id}`).datepicker(this.options)
            .on('change', e => {
                let changeEvent = new CustomEvent('input', {
                    detail: {
                        value: e.val
                    },
                    bubbles: true
                });

                this.element.dispatchEvent(changeEvent);
            });
    }

    detached() {
        $(`#${this.id}`).datepicker('destroy').off('change');
    }
}

The View

Now, our custom element needs a view which will render our date picker. Save the following file as jquery-datepicker.html (matching the same name we used for our .js file).

<template>
    <input id="${id}" name="${name}" type="text">
</template>

Using the jQuery component

Below is a basic use-case of the date picker being used. We created a custom element, so require it or globalise it and then use it like so.

<template>
    <require from="./jquery-datepicker"></require>

    <jquery-ui-datepicker id="myInput" name="myInput"></jquery-ui-datepicker>
</template>

Conclusion

Even though we focused on using the date picker, the same rules above apply to all jQuery UI plugin modules. I also think creating a custom element for something like this might be overkill.

You can take the contents of the custom element and use it as a guide to implement it into your applications directly. Another good idea might be to create a custom attribute instead.

If you want help integrating another jQuery component, drop me a line in the comments and that is definitely possible.

Liked it? Take a second to support Dwayne on Patreon!
 

Dwayne

 

15 thoughts on “Using jQuery UI Widgets in Aurelia

  1. Great article! any chance you could show TagsInput with typeahead integrated in Aurelia? I’m tearing my hair out over here.

  2. I am trying to use this as a datepicker and I have it mostly working. However, I don’t see how to bind to the value.

    I see an event, but I don’t see how to wire up the event so the value is captured.

    It would be great to use value.bind=”myDate”, but I don’t see how to do that.

  3. I’m trying to use this in the latest skeleton-esnext-webpack and $(…).datepicker is not defined in attached()

  4. Hey, I can’t seem to get your example working. I’ve create a test gitHub project (https://github.com/gitKearney/aurelia-jquery-datepicker), but, the error I’m getting is

    Unhandled rejection TypeError: (0 , _jquery2.default)(…).datepicker is not a function

    Here’s a link to my project if you could checkout it out and let me know what I’m doing wrong.

    Also, feel free to link this article to it. I’ll leave it up so people can see what a working example looks like

  5. I have the same problem: The jQuery UI will not be attached to the $ object, so $(…).datepicker is not a function.

    I installed like this:
    (1) jspm install jquery
    (2) jspm install jquery-ui

    Imports look like this:

    import $ from ‘jquery’;
    import { datepicker } from ‘jquery-ui’;

    Any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *