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


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">
        <div id="datepicker"></div>
    <script type="application/dart" src="clickcounter.dart"></script>

The initialisation of this widget is done in JS like that

    { $( "#datepicker" ).datepicker();});

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.



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


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');

Answered By – Alexandre Ardhuin

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

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