TimePicker easepick is not working with Stencil

Question

I'm getting an error when try to use the easepick with the Stencil framework. https://easepick.com/guide/

Error

peError: (t || this.calendars[0]).clone is not a function
    at n.renderAll (date-picker.entry.js:3:1)
    at new n (date-picker.entry.js:3:1)
    at OsdiDatePicker.componentDidLoad (date-picker.entry.js:15:1)
    at safeCall (index-1c078499.js:955:1)
    at postUpdateComponent (index-1c078499.js:915:1)
    at postUpdate (index-1c078499.js:863:1)
    at _callee$ (index-1c078499.js:865:1)
    at tryCatch (index-1c078499.js:2:1)
    at Generator.<anonymous> (index-1c078499.js:2:1)
    at Generator.next (index-1c078499.js:2:1) undefined

The Stencil code example:

import { Component, h } from "@stencil/core";
import { easepick } from "@easepick/bundle";

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true,
})
export class MyComponent {
  datepicker: HTMLInputElement;

  componentDidLoad() {
    const pickerNew = new easepick.create({
      element: this.datepicker,
      css: [
        "https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css",
      ],
    });

    console.log("DEBUG pickerNew:", pickerNew);
  }

  render() {
    return (
      <div class="date-picker-container">
        <input id="datepicker" ref={(el) => (this.datepicker = el)} />
      </div>
    );
  }
}

I don't know if it's related only to Stencil because Stencil is using ShadowRoot and the easepick also uses ShadowRoott

I appreciate any support.

Can you create a minimal example, e.g. on [webcomponents.dev](https://webcomponents.dev)? — Thomas, May 10 '23 at 13:06
@Thomas ok, Itryed remake in sandbox code but is getting a different errer. I think it'll not help but here is the link: https://codesandbox.io/p/sandbox/vibrant-mountain-cqby3w?file=%2Fsrc%2Fcomponents%2Fmy-component%2Fmy-component.tsx%3A20%2C33 — Fabio Ribeiro de Carvalho, May 10 '23 at 15:21

score 1 · Answer 1 · answered May 09 '23 at 14:16

Works fine in vanilla JavaScript:

<script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.umd.min.js"></script>
<date-picker></date-picker>
<script>
  customElements.define("date-picker",class extends HTMLElement{
    constructor(){
      super().attachShadow({mode:"open"}).innerHTML = `<input/>`;
      new easepick.create({
        element: this.shadowRoot.querySelector("input"),
        css: ['https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css', ],
      });
    }
  })
</script>

TimePicker easepick is not working with Stencil

1 Answers1