नया
टाइम पिकरInterval Dropdown Time Picker
A native select of times generated on a fixed interval, so the value always lands on the grid.
#time-picker#dropdown#select
3 फ्रेमवर्कशुरुआती
Loading…
Hours and minutes as ARIA spinbuttons with plus/minus controls and arrow-key support.
<div class="w-full max-w-xs">
<span class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Time</span>
<div class="flex items-center gap-2">
<div class="flex flex-col items-center gap-1">
<button type="button" aria-label="Increment hours" class="flex h-10 w-14 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd" /></svg>
</button>
<div role="spinbutton" tabindex="0" aria-label="Hours" aria-valuenow="14" aria-valuemin="0" aria-valuemax="23" aria-valuetext="14" class="flex h-12 w-14 items-center justify-center rounded-lg border border-gray-300 bg-white text-2xl font-semibold tabular-nums 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">14</div>
<button type="button" aria-label="Decrement hours" class="flex h-10 w-14 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>
</button>
</div>
<span class="pb-1 text-2xl font-semibold text-gray-400">:</span>
<div class="flex flex-col items-center gap-1">
<button type="button" aria-label="Increment minutes" class="flex h-10 w-14 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z" clip-rule="evenodd" /></svg>
</button>
<div role="spinbutton" tabindex="0" aria-label="Minutes" aria-valuenow="30" aria-valuemin="0" aria-valuemax="59" aria-valuetext="30" class="flex h-12 w-14 items-center justify-center rounded-lg border border-gray-300 bg-white text-2xl font-semibold tabular-nums 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">30</div>
<button type="button" aria-label="Decrement minutes" class="flex h-10 w-14 items-center justify-center rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">
<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" /></svg>
</button>
</div>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
valueआवश्यक | string | - | मेट्रिक की मौजूदा वैल्यू, पहले से फ़ॉर्मैट की हुई। |
onChangeआवश्यक | (value: string) => void | - | On change |
minuteStep | number | 5 | Minute step |
label | string | 'Time' | लोड होते समय पढ़ा जाने वाला एक्सेसिबल लेबल। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Each field is a `role="spinbutton"` with live `aria-valuenow`/`aria-valuetext`, driven by the up/down buttons or the Arrow keys, and both wrap cleanly across 0. Tune `minuteStep` to change how far the minute field jumps per press.