0

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:

flatpickr

¿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

1 respuesta 1

0

Solo cambia el tipo de input a "text", agrega el readonly para que no modifiquen el valor que sea seleccionado por el usuario.

$('#card_pago').prepend(
        `<input type="text" id="fecha_convenio" class="form-control form-control-sm fechas pago flatpickr-input" name="fecha_convenio" readonly />`
    );
1
  • Según Yo lo hice de esa manera, campo tipo texto no agregue un readonly directo en la etiqueta lo configure en el objeto de opciones pero no funciono
    – Minor
    el 20 ene. a las 19:37

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.