TimePicker
TimePicker thuộc nhóm Picker & Select. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Bắt đầu nhanh
Import TimePicker từ entry của gói Free. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
import { TimePicker } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử TimePicker thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
TimePicker
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
value | Giá trị thời gian điều khiển (ví dụ '14:30' hoặc '02:30 PM'). | string | — |
defaultValue | Giá trị thời gian ban đầu khi uncontrolled. | string | — |
onChange | Gọi khi thời gian thay đổi (string) hoặc undefined. | (value: string | undefined) => void | — |
placeholder | Placeholder khi chưa chọn. | string | "Select time" |
disabled | Vô hiệu hoá điều khiển. | boolean | false |
size | Kích thước nút chọn. | FormControlSize | "md" |
label | Nhãn hiển thị phía trên. | string | — |
required | Hiển thị dấu bắt buộc. | boolean | — |
format | Định dạng đồng hồ: 24 giờ hoặc 12 giờ. | TimeFormat | "24" |
includeSeconds | Cho phép chọn giây. | boolean | false |
minuteStep | Bước tăng phút trong danh sách. | number | 1 |
secondStep | Bước tăng giây trong danh sách. | number | 1 |
clearable | Hiển thị nút Clear trong popover. | boolean | true |
variant | Visual variant of the picker | TimePickerVariant | "default" |
matchTriggerWidth | Match dropdown width to trigger width | boolean | — |
showNow | Show "Now" button | boolean | false |
showPresets | Show time presets (Morning, Afternoon, Evening) | boolean | false |
allowManualInput | Enable manual input | boolean | false |
customPresets | Custom presets with labels and times | Array<{ label: string; time: string }> | [] |
min | Alias for minTime (e.g., "09:00") | string | — |
max | Alias for maxTime (e.g., "18:00") | string | — |
minTime | Minimum allowed time (e.g., "09:00") | string | — |
maxTime | Maximum allowed time (e.g., "18:00") | string | — |
disabledTimes | Disabled times function or array | ((time: string) => boolean) | string[] | — |
error | Show validation feedback | string | — |
success | Success state | boolean | — |
helperText | Helper text | string | — |
animate | Enable smooth animations | boolean | true |
onOpen | Callback when popover opens | () => void | — |
onClose | Callback when popover closes | () => void | — |
borderMode | Mã nguồn chưa cung cấp mô tả bổ sung. | BorderMode | — |
getPortalContainer | Resolve the document element that should receive the picker portal. | () => HTMLElement | null | — |
Hướng dẫn sử dụng
Dùng TimePicker khi lựa chọn có giới hạn nhanh và an toàn hơn nhập tự do. Cần cấu hình rõ locale, giới hạn, giá trị bị vô hiệu hóa và trạng thái xóa.
Trợ năng
Khi dùng TimePicker, hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.