es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Flatpickr no se abre cuando el campo de entrada es requerido en iOS.

06 Aug, 2023 Programación

He estado tratando de encontrar la causa de este problema, pero tengo un campo de entrada para la fecha y hora de Flatpickr pero no se abre el selector de fecha nativo del iPhone.

Esto solo ocurre cuando el campo es obligatorio, en iPhone 11 y en versiones anteriores, sin importar si es Safari o Chrome.

Otra cosa extraña es que también tenemos otros entornos y el selector de fecha se abre en esos, pero el HTML para la entrada es el mismo.

Aquí está el HTML de entrada:

<div class="form__field-group u-full-width  dw-mod">
    <div class="u-full-width"> 
        <label for="DateOfBirth" class="u-pull--left">Fecha de nacimiento <span class="required dw-mod">*</span></label>
    </div>
    <input id="DateOfBirth" required="true" name="DateOfBirth" type="hidden" value="2004-01-01" class="u-full-width dw-mod flatpickr-input">
    <input class="u-full-width dw-mod flatpickr-input flatpickr-mobile" step="any" tabindex="1" type="date" required="" placeholder="" value="2004-01-01" max="2004-10-03">
</div>

Y el script de Flatpickr:

document.addEventListener("DOMContentLoaded", function () {
  flatpickr("#DateOfBirth", {
    mode: 'single',
    maxDate: '1/10/2004 10:03:44 AM'
  });
});

Video de los problemas: screencast.com/t/JOnB4CpZvg

¿Alguien ha tenido el mismo problema antes? ¿Cómo solucionar este error?

Gracias.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está relacionado con el atributo type="date" en el segundo campo de entrada. Este atributo no es completamente compatible con todos los navegadores, incluyendo las versiones antiguas de Safari y Chrome en iPhone 11 y anteriores. Cuando el atributo type="date" está presente, se utilizará el selector de fechas nativo del navegador en lugar del selector de fechas personalizado de Flatpickr.

    Una posible solución es eliminar el atributo type="date" y confiar en Flatpickr para manejar la entrada de fecha. Otra solución es utilizar una biblioteca de polyfill como Pikaday o Datepicker.js para proporcionar un selector de fechas consistente en todos los navegadores y dispositivos.

    Para implementar la primera solución, simplemente elimine el atributo type="date" y cambie el script de Flatpickr a:

    document.addEventListener("DOMContentLoaded", function () {
  flatpickr("#DateOfBirth", {
    mode: 'single',
    maxDate: '10/01/2004 10:03:44 AM',
    dateFormat: 'Y-m-d',
    defaultDate: '2004-01-01',
    disableMobile: true // Esto es para desactivar el selector de fechas móvil nativo
  });
});

    Note la adición de las opciones dateFormat y defaultDate para que coincidan con el valor de entrada existente. Además, la opción disableMobile se establece en true para desactivar el selector de fechas móvil nativo.

    Implementar la segunda solución requeriría agregar una biblioteca de polyfill y modificar el HTML de entrada y el script de Flatpickr en consecuencia. Consulte la documentación de la biblioteca elegida para obtener instrucciones específicas sobre cómo hacer esto.

Comments are closed.