TW-Elements
TW-Elements copied to clipboard
mdbootstrap
How clone and initialize TW element via vanilla JS?
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:
- 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>
- 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?
Is there some global method to reinit all the tw-elements on the page maybe?
We're going to rewrite config for the library to enable manual re-init soon: https://github.com/mdbootstrap/Tailwind-Elements/issues/1125
