Using jQuery UI Widgets in Aurelia

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.