Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How clone and initialize TW element via vanilla JS? #1054

Closed
eleave opened this issue Jun 12, 2022 · 2 comments
Closed

How clone and initialize TW element via vanilla JS? #1054

eleave opened this issue Jun 12, 2022 · 2 comments

Comments

@eleave
Copy link

eleave commented Jun 12, 2022 •
edited

Hey there, Tailwind lovers! :-)

Could you help me with the simple question please?
I cannot find in the docs how to call and init the Datepicker (or any other component) via vanilla JS programmably?
What I do... I do the clone of a form with cloneNode method like this:

  1. I have hidden HTML template with Tailwind Element Datepicker:
<template id="temp">
  <form>
    <div class="datepicker relative mb-3" data-mdb-toggle-button="false">
      <input type="text" placeholder="Select a date" data-mdb-toggle="datepicker" />
      <label class="text-gray-700">Select a date</label>
    </div>
  </form>
</template>
  1. When user clicks some button somewhere in the page "+ Add new form", then the new form will be added to the page. There can be many forms as user wants. So I want to use this template to clone it and insert new and new and new nodes to the page:
import 'tw-elements'
let newForm = document.querySelector("#temp").content.cloneNode(true); // clone the <form>
     newForm.appendChild(document.body); // add to the <body>

After these manipulations the new form added to the page, but the Datepicker does not work, it does not initialize.
As I understood, I should call the initialization of the element programmably via JS like this:

let datePicker = newForm.querySelect('.datepicker');
datePicker.tweDatePicker(); // smth like that maybe

Right? But how?
@eleave
Copy link
Author

eleave commented Jun 13, 2022

Is there some global method to reinit all the tw-elements on the page maybe?

@eleave eleave changed the title How clone and init Datepicker via vanilla JS correctly? How clone and initialize TW element via vanilla JS? Jun 13, 2022
@smolenski-mikolaj
Copy link
Contributor

We're going to rewrite config for the library to enable manual re-init soon: #1125

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@smolenski-mikolaj @eleave