Agrego un div con append:
$('#card_pago').prepend(
`<input type="date" id="fecha_convenio" class="form-control form-control-sm fechas pago flatpickr-input" name="fecha_convenio"/>`
);
A este input le agrego una clase "flatpickr-input" la cuál se usa de la manera siguiente:
$(document).ready( () => {
/* Configuración global con objeto, por selector de clase */
const opcionesFlatPickR = {
allowInput: false,
allowInvalidPreload: false,
altFormat: 'F j, Y',
altInput: true,
dateFormat: 'Y/m/d',
enableTime: false,
maxDate: new Date(),
weekNumbers: true
}
flatpickr('.flatpickr-input', opcionesFlatPickR);
});
Flatpickr es un selector de fecha y hora ligero y potente, añado este plugin por medio de CDN a mi aplicación web.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
También agregue el CDN de tema oscuro y lenguaje, para unos ajustes en el sistema, les dejo una captura de patanlla del plugin:
¿Cuál es mi problema y/o duda? Bien, la clase la agrego a otros campos tipo date en el sistema y funciona bien, me imagino es por la carga del DOM, pero al momento de hacer el append no funciona carga un campo date con diseño por defecto del navegador (en este caso Chrome), quiero suponer que es porque el append se agrega después de la carga del DOM y por eso no funciona ¿Cómo puedo corregir eso?
Estuve leyendo de window.onload y de:
document.addEventListener('DOMContentLoaded', () => {
$('#fecha_convenio').hide();
// flatpickr(, opcionesFlatPickR);
});
Pero honestamente no entendí ni supe como hacerlo