Semana
Date en segments
Jour, mois et année dans des cases qui avancent seules, défilent avec les flèches et tournent une page de calendrier.
Réglages
Code
<div class="uvq06-dt"><span class="lb" id="uvq06-dt-l">Date d'arrivée</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="Jour" placeholder="JJ"><span class="sp" aria-hidden="true">/</span><input class="sg" data-min="1" data-max="12" maxlength="2" inputmode="numeric" autocomplete="off" aria-label="Mois" 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="Année" placeholder="AAAA"></div><p class="ft" aria-live="polite"><span class="wn"></span><span class="wk">Semaine <b></b></span></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Voir tout : ChampsOù l’utiliser
Un champ de date découpé en trois cases numériques, comme dans les systèmes d'exploitation de bureau. La saisie passe toute seule à la case suivante, la barre oblique aussi, et les flèches haut et bas font défiler chaque valeur. Une page de calendrier affiche le jour de la semaine, le numéro de semaine apparaît dessous et une date impossible fait trembler le champ.
La couleur principale teinte la case active et l'en-tête de la page. Il convient aux réservations, aux dates de livraison et aux anniversaires quand un calendrier complet serait trop lourd, et garde le clavier numérique du mobile sur chaque case.