0
169
ViewsHacer cambios de css locales de fecha y hora
Cambios de CSS para la etiqueta de entrada local de fecha y hora:
Quiero hacer esta cosa del calendario en el lado derecho como se muestra en la imagen 2, por favor ayúdame a resolver esto.
Aquí están mis códigos para la etiqueta de entrada con tipo "datetype-local"
<h1>Show a Date and Time Control</h1> <form action="/action_page.php"> <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> <input type="submit"> </form>Gracias
Antes de hacer clic en la imagen del calendario 
Después de hacer clic en la imagen del calendario 
2 answers
Answer question0
Desafortunadamente, en este momento solo WebKit nos permite personalizar la fecha y hora. Si es aceptable para usted, puede leer este artículo .
0
El elemento <input type="date" /> ya tiene un adorno, pero varía según el navegador y el sistema operativo. Necesitará crear un elemento contenedor personalizado (como se ve a continuación), si desea que su interfaz de usuario sea consistente en todos los sistemas.
Puede agregar un adorno de entrada envolviendo <input> en un <div> y agregando un estilo ::after para el contenedor. El elemento nativo <input> no admite ::before y ::after porque no es un elemento contenedor.
const handleClickIcon = (e) => { if (e.target.classList.contains('datetime-wrapper')) { console.log('Toggle calendar!'); } }; document.querySelector('.datetime-wrapper') .addEventListener('click', handleClickIcon); .as-console-wrapper { max-height: 4em !important; } .datetime-wrapper { position: relative; padding: 0; margin: 0; width: max-content; } .datetime-wrapper input { padding: 0.5rem; border: thin solid grey; border-radius: 0.25rem; } /* adornment */ .datetime-wrapper::after { /* .fa-solid */ font-family: "Font Awesome 6 Free"; font-weight: 900; /* .fa-calendar-days:before */ content: "\f073"; /* custom */ position: absolute; top: 0; right: 0.5rem; height: 2rem; line-height: 2rem; cursor: pointer; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/fontawesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/solid.min.css" rel="stylesheet"/> <input type="date" /> <div class="datetime-wrapper"> <input type="text" /> </div> <span>Font Awesome:</span> <i class="fa-solid fa-calendar-days"></i>