1

Tengo un Input type="date" al cual le elimine todos los controles visuales mediante css. Quiero que al hacer click sobre el input despliegue el calendario. Como puedo implementar esto?

input[type="date"]::-webkit-inner-spin-button,
                  ::-webkit-calendar-picker-indicator,
                  ::-webkit-datetime-edit{
    display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="date" id="fecha" onclick="" class="mt-4 form-control">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>

1 respuesta 1

1

Para mostra el calendario nuevamente en input date se puede hacer usando una regla CSS para que muestre esa parte. (recuerda que la regla que hiciste oculta todo (el boton spin, el calendario, el campo de fecha)

El problema con la regla que aplicaste es que no te muestra la fecha seleccionada en el calendario, por lo que coloque otra regla para muestrar al tener el cursor hover.

Este es el codigo:

   /* ocultar controles de input date */ 
     input[type="date"]::-webkit-inner-spin-button,
                  ::-webkit-calendar-picker-indicator,
                  ::-webkit-datetime-edit{
        display: none;
    }
    
   
    /* mostrar el calendario al hacer click */
    input[type="date"]::-webkit-calendar-picker-indicator {
        display: block;
        background: transparent;
        bottom: 0;
        color: transparent;
        cursor: pointer;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }
   
    /* mostrar la fecha seleccionada al estar en hover */
    input[type="date"]:hover::-webkit-datetime-edit {
        display: block;
    }
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <label>Fecha:</label>
    <input type="date" id="fecha" onclick="" class="mt-4 form-control">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
</html>

Espero que sea de ayuda...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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