最新
时间选择器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…
Paired start and end selects that stack on mobile and flag an end that precedes the start.
<div class="w-full max-w-md">
<div class="flex flex-col gap-3 sm:flex-row sm:items-end">
<div class="flex-1">
<label for="range-start" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">Start</label>
<select id="range-start" class="w-full appearance-none rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm 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="09:00" selected>9:00 AM</option>
<option value="09:30">9:30 AM</option>
</select>
</div>
<span aria-hidden="true" class="hidden pb-2.5 text-gray-400 sm:block">-</span>
<div class="flex-1">
<label for="range-end" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">End</label>
<select id="range-end" class="w-full appearance-none rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm 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="10:00">10:00 AM</option>
<option value="10:30" selected>10:30 AM</option>
</select>
</div>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
start必填 | string | - | Start |
end必填 | string | - | End |
onChange必填 | (range: { start: string; end: string }) => void | - | On change |
intervalMinutes | number | 30 | Interval minutes |
className | string | - | 合并到根元素上的额外类名。 |
Because both bounds are zero-padded `HH:MM` strings, a plain string comparison is a valid chronological check - an invalid end sets `aria-invalid`, reddens the field and surfaces a `role="alert"` message. The two selects sit side by side above `sm` and stack below it.