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.

17 responses to “Using jQuery UI Widgets in Aurelia”

  1. calabonga says:

    Thanks! A very good example!

  2. Newbie says:

    Would it be possible to use JQuery Bootstrap framework along with Aurelia ?

  3. Dwayne says:

    Newbie,

    Yes, absolutely. Simply install it via JSPM and then import it inside of your main.js/main.ts file.

  4. Newbie says:

    Dwayne, Thank you, Its working great ! Is it applicable to any third party JQuery libraries ?
    I would really like to use a tags input library from JQuery, https://github.com/xoxco/jQuery-Tags-Input inside aurelia.
    Can i use any third party JQuery libraries inside aurelia ?

  5. Alexander Mahterian says:

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

  6. Josh Cohen says:

    El unico que mata nerds es Richarrrld

  7. Greg Gum says:

    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.

  8. Scott says:

    Could you provide a flatpickr example?

  9. John Mooney says:

    Hi Dwayne, Is there any chance you know how to bundle jquery-ui using the Aurelia CLI?

  10. allen joslin says:

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

  11. Kearney Taaffe says:

    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

  12. Simon says:

    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?

  13. Aditya says:

    Hi Dwayne,
    can you please share a working example with aurelia-cli as the bundling solution

  14. wal says:

    Would you be able to fix the code samples in your article? they are missing from a couple of the code pre sections

  15. Brian says:

    Same error here. Used the typescript skeleton framework and dropped in your files and did the npm install command, but getting datepicker() not a function error. Would be great if there was a plunkr link or github where we could get a copy and play with working code to see what we are doing wrong.

  16. Michael says:

    Simon, hopefully you figured this out already, but this bit me for several hours before realizing ..

    import ‘jquery’;

    No “$ from” is needed

Leave a Reply

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