FeaturedNew
Date PickersInput With Popover Calendar
A read-only field that opens an absolutely positioned calendar popover, filling the input on select.
#date-picker#popover#input
3 frameworksIntermediate
Loading…
Three native day, month and year selects - the right tool for a date decades in the past.
<div class="w-full max-w-sm rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
<p class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Date of birth</p>
<div class="grid grid-cols-3 gap-2">
<div>
<label class="sr-only" for="dp-day">Day</label>
<select id="dp-day" class="h-11 w-full min-w-0 rounded-lg border border-gray-300 bg-white px-2 text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400">
<option value="">Day</option>
<option value="14">14</option>
</select>
</div>
<div>
<label class="sr-only" for="dp-bmonth">Month</label>
<select id="dp-bmonth" class="h-11 w-full min-w-0 rounded-lg border border-gray-300 bg-white px-2 text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400">
<option value="">Month</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
</div>
<div>
<label class="sr-only" for="dp-byear">Year</label>
<select id="dp-byear" class="h-11 w-full min-w-0 rounded-lg border border-gray-300 bg-white px-2 text-sm text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400">
<option value="">Year</option>
<option value="1990">1990</option>
</select>
</div>
</div>
<p class="mt-3 text-xs text-gray-500 dark:text-gray-400" aria-live="polite">Select all three fields.</p>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
today | string | '2026-07-17' | Today |
maxYear | number | 2026 | Max year |
className | string | - | Additional classes merged onto the root element. |
A calendar grid is cruelty for a birthday: nobody wants to page a calendar back forty years. Three selects jump straight there; the day count adjusts to the chosen month and year, and the computed age is measured against the `today` prop, never the clock.