Semana
Fecha por segmentos
Día, mes y año en casillas que saltan solas, cambian con las flechas y pasan una hoja de calendario al cambiar.
Ajustes
Código
<div class="uvq06-dt"><span class="lb" id="uvq06-dt-l">Fecha de llegada</span><div class="fd" role="group" aria-labelledby="uvq06-dt-l"><div class="pg" aria-hidden="true"><span class="wd"></span><span class="dn"></span></div><input class="sg" data-min="1" data-max="31" maxlength="2" inputmode="numeric" autocomplete="off" aria-label="Día" placeholder="DD"><span class="sp" aria-hidden="true">/</span><input class="sg" data-min="1" data-max="12" maxlength="2" inputmode="numeric" autocomplete="off" aria-label="Mes" placeholder="MM"><span class="sp" aria-hidden="true">/</span><input class="sg y" data-min="1900" data-max="2099" maxlength="4" inputmode="numeric" autocomplete="off" aria-label="Año" placeholder="AAAA"></div><p class="ft" aria-live="polite"><span class="wn"></span><span class="wk">Semana <b></b></span></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
Un campo de fecha dividido en tres casillas numéricas, como en los sistemas operativos de escritorio. Al escribir salta solo a la siguiente, la barra también avanza y las flechas arriba y abajo hacen rodar cada valor. Una hoja de calendario muestra el día de la semana, debajo aparece el número de semana y las fechas imposibles hacen temblar el campo.
Cambia el color principal para teñir la casilla activa y la cabecera de la hoja. Encaja en reservas, fechas de entrega y cumpleaños cuando un calendario desplegable es demasiado, y mantiene el teclado numérico del móvil en cada casilla.