How to embed a jquery ui widget into a polymer-dart webcomponent

Question

I try to embed a jquery ui widget, f.e. a datepicker into a polymer-dart webcomponent.

The Webcomponent is defined like that:

<polymer-element name="my-datepicker">
    <template>
        <div id="datepicker"></div>
    </template>
    <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

The initialisation of this widget is done in JS like that

<script>
    $(function() 
    { $( "#datepicker" ).datepicker();});
</script>

How can I initialize that widget in dart in my polymer.dart webcomponent.

I tried with 'dart:js' to call that method, but I cannot access the shadow dom with dart:js.

With

shadowRoot.querySelector("#datepicker")

I can access the shadow-dom, but how can I call a JS method - datepicker() - on that

Answer 1

You can pass an element to jQuery instead of a selector. So the following code should work :

final element = $['datepicker'];
js.context.callMethod(r'$', [element]).callMethod('datepicker');

Answer 2

Just call JQuery on the element and then call datepicker(). The dart js package makes it human-readable:

import 'package:js/js.dart';

var element = shadowRoot.querySelector("#datepicker");
var $ = context.global[r'$'];
$(element).datepicker();