Semana
Segmented date input
Day, month and year boxes that jump ahead on their own, change with the arrow keys and flip a small calendar page.
Settings
Code
<div class="uvq06-dt"><span class="lb" id="uvq06-dt-l">Arrival date</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="Day" 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="Month" 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="Year" placeholder="YYYY"></div><p class="ft" aria-live="polite"><span class="wn"></span><span class="wk">Week <b></b></span></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
A date field split into three numeric boxes, the way desktop operating systems do it. Typing moves on by itself, the slash key skips ahead and the up and down arrows roll each value. A tear-off calendar page shows the weekday, the week number appears below, and impossible dates such as 31 February shake the field.
Change the main color to match the active box and the page header. It fits booking forms, delivery dates and birthdays where a full calendar popup is too heavy, and it keeps the mobile number keyboard on every box.