नया
टाइम पिकर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…
Three independently scrollable columns of hours, minutes and AM/PM in a compact wheel-style panel.
<div class="w-full max-w-xs rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="flex divide-x divide-gray-200 dark:divide-gray-800" role="group" aria-label="Select time">
<div class="h-40 flex-1 space-y-1 overflow-y-auto scroll-smooth p-1" aria-label="Hour">
<button type="button" aria-pressed="false" class="w-full rounded-md px-2 py-2 text-sm font-medium tabular-nums text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">01</button>
<button type="button" aria-pressed="true" class="w-full rounded-md bg-blue-600 px-2 py-2 text-sm font-medium tabular-nums text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">02</button>
</div>
<div class="h-40 flex-1 space-y-1 overflow-y-auto scroll-smooth p-1" aria-label="Minute">
<button type="button" aria-pressed="true" class="w-full rounded-md bg-blue-600 px-2 py-2 text-sm font-medium tabular-nums text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">30</button>
</div>
<div class="h-40 flex-1 space-y-1 overflow-y-auto scroll-smooth p-1" aria-label="Period">
<button type="button" aria-pressed="false" class="w-full rounded-md px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">AM</button>
<button type="button" aria-pressed="true" class="w-full rounded-md bg-blue-600 px-2 py-2 text-sm font-medium text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:focus-visible:ring-blue-400">PM</button>
</div>
</div>
</div>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
valueआवश्यक | string | - | मेट्रिक की मौजूदा वैल्यू, पहले से फ़ॉर्मैट की हुई। |
onChangeआवश्यक | (value: string) => void | - | On change |
minuteStep | number | 5 | Minute step |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Each column is an `overflow-y-auto` list of buttons with `aria-pressed` marking the active value; the selection recombines into a 24-hour `HH:MM` string on every tap. Adjust `minuteStep` to thin or thicken the minute column.