jQuery-UI DatePicker not working with Aurelia and Typescript

Question

I am trying to create a wrapper (custom attribute) around jQuery UI DatePicker. The date-picker.ts looks like below so far:

import {inject, bindable} from "aurelia-framework";

export class DatePickerCustomAttribute {
   static inject = [Element];

   @bindable isdate;

   constructor(public element:Element) {
   }

   bind() {
       if (this.isdate) {
           console.log("trying to set datepicker");
           $(this.element).datepicker();
       }
   }

}

Usage:

<require from="./date-picker"></require>
...
<input ... date-picker="isdate.bind:isDate"/>

This works in Chrome, however not in Firefox or Edge. The code throws an error on execution of this line: $(this.element).datepicker(); . And the error says: Error: Assertion failed .

My Development Setup: Visual Studio 2015 - Aurelia - Typescript 1.5.4 - along with the necessary type definitions such as for aurelia, jQuery, jQueryui , and jQuery-ui-datetimepicker .

Requesting for help and suggestions.

Thank You.

EDIT: The stack trace is something like this:

Stack trace: 
assert@https://localhost:44300/Scripts/webcomponents.js:112:21
assertIsNodeWrapper@https://localhost:44300/Scripts/webcomponents.js:1573:7
.insertBefore@https://localhost:44300/Scripts/webcomponents.js:1787:9
.appendChild@https://localhost:44300/Scripts/webcomponents.js:1784:16
.buildFragment@https://localhost:44300/Scripts/jquery-2.1.4.js:5150:18
.domManip@https://localhost:44300/Scripts/jquery-2.1.4.js:5387:15
.append@https://localhost:44300/Scripts/jquery-2.1.4.js:5218:1
$.fn.datepicker@https://localhost:44300/Scripts/jquery-ui-1.11.4.js:5811:3
DatePickerCustomAttribute</DatePickerCustomAttribute.prototype.bind@https://localhost:44300/aureliaviews/shared/date-picker.js:19:17
.......

Answer 1

webcomponents.js (polymer) is causing the issue. Try removing your dependency on that library. More troubleshooting tips here:

https://github.com/webcomponents/webcomponentsjs/issues/301