• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Using jQuery UI Widgets in Aurelia

Aurelia 1 Tutorials, Javascript · February 6, 2016

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.

Dwayne

Leave a Reply Cancel reply

17 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
calabonga
calabonga
7 years ago

Thanks! A very good example!

0
Newbie
Newbie
7 years ago

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

0
Dwayne
Dwayne
Author
Reply to  Newbie
7 years ago

Newbie,

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

0
Newbie
Newbie
Reply to  Dwayne
7 years ago

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 ?

0
Alexander Mahterian
Alexander Mahterian
7 years ago

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

0
Josh Cohen
Josh Cohen
6 years ago

El unico que mata nerds es Richarrrld

0
Raj
Raj
6 years ago

@Alexander Mahterian Try this link.

https://medium.com/@Raj_Virtual/using-tags-input-jquery-plugin-with-aurelia-57e2ab60f979

0
Greg Gum
Greg Gum
6 years ago

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.

0
Scott
Scott
6 years ago

Could you provide a flatpickr example?

0
John Mooney
John Mooney
6 years ago

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

0
allen joslin
allen joslin
6 years ago

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

0
Kearney Taaffe
Kearney Taaffe
6 years ago

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

0
Simon
Simon
6 years ago

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?

0
Aditya
Aditya
6 years ago

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

0
wal
wal
6 years ago

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

0
Brian
Brian
5 years ago

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.

0
Michael
Michael
5 years ago

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

import ‘jquery’;

No “$ from” is needed

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz