Tengo campos anidados que se agregan al DOM cuando un usuario desea agregar más campos. esto lo hace un archivo nested_fields.js.
El problema es que uno de los campos que se agregan es un campo de calendario que está siendo manejado por otro archivo JS llamado calender_manager.js
calender_manager.js usa el módulo Flatpickr y busca etiquetas de entrada con la clase .flatpickr en el archivo HTML de la página. Esto sucede cuando se carga la página, por lo que calender_manager.js no selecciona los campos agregados al DOM por nested_fields.js con la clase .flatpickr.
Hasta ahora, mi solución es crear un archivo JS personalizado para los campos de calendario anidados que maneja agregar los campos anidados y agregar flatpickr. Me preguntaba si hay una mejor manera.
Nunca he oído hablar de flatpickr, pero lo acabo de investigar, tal vez no sé lo que está preguntando, pero ¿está tratando de habilitarlo después de que se cargue la página? Si es así llamando a flatpickr(".my_input"); de nuevo funciona.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <input type="text" class="my_input" /><br /> <input type="button" id="enable" value="Click to enable flatpickr" /> <input type="button" id="disable" value="Click to disable flatpickr" /> <script> var f; document.querySelector("#enable").onclick = function () { f = flatpickr(".my_input"); } document.querySelector("#disable").onclick = function () { f.destroy(); } </script>