DatePicker (with i18n)
DatePicker (with i18n) 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 DatePicker (with i18n) 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 { DatePicker } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử DatePicker (with i18n) 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.
DatePicker
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
id | Thuộc tính id cho nút kích hoạt. | string | — |
value | Giá trị ngày đã chọn. | Date | — |
onChangeBắt buộc | Hàm thay đổi nhận ngày được chọn hoặc undefined khi xoá. | (date: Date | undefined) => void | Bắt buộc |
formatDate | Custom date display formatter function | (date: Date) => string | — |
placeholder | Placeholder khi chưa có giá trị. | string | — |
className | Class tuỳ chỉnh cho nút kích hoạt. | string | — |
disabled | Vô hiệu hoá bộ chọn ngày. | boolean | false |
size | Kích thước hiển thị (sm, md). | FormControlSize | "md" |
label | Nhãn hiển thị phía trên. | string | — |
labelClassName | Custom class for label | string | — |
required | Đánh dấu bắt buộc. | boolean | — |
todayLabel | Nhãn nút Today (nếu cung cấp). | string | — |
clearLabel | Nhãn nút Clear. | string | — |
weekdayLabels | Tuỳ chỉnh nhãn ngày trong tuần; mặc định Su..Sa. | string[] | — |
disablePastDates | Disable selecting past dates (before today) | boolean | false |
minDate | Minimum selectable date (inclusive). Compared by day in local timezone. | Date | — |
maxDate | Maximum selectable date (inclusive). Compared by day in local timezone. | Date | — |
borderMode | Mã nguồn chưa cung cấp mô tả bổ sung. | BorderMode | — |
iconOnly | Render a compact calendar-button trigger instead of the editable date input. | boolean | false |
iconOnlyDateFormat | Date format displayed above an icon-only trigger. | "locale" | "year-month-day" | "locale" |
getPortalContainer | Resolve the document element that should receive the calendar portal. | () => HTMLElement | null | — |
CompactDatePicker
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
value | Giá trị ngày đã chọn. | Date | — |
onChangeBắt buộc | Hàm thay đổi nhận ngày được chọn hoặc undefined khi xoá. | (date?: Date) => void | Bắt buộc |
className | Class tuỳ chỉnh cho nút kích hoạt. | string | — |
getPortalContainer | Mã nguồn chưa cung cấp mô tả bổ sung. | () => HTMLElement | null | — |
DateRangePicker
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
id | Thuộc tính id cho nút kích hoạt. | string | — |
startDate | Ngày bắt đầu. | Date | — |
endDate | Ngày kết thúc. | Date | null | — |
onChangeBắt buộc | Hàm thay đổi nhận (start, end). | (start: Date | undefined, end: Date | null | undefined) => void | Bắt buộc |
formatDate | Custom date display formatter function applied to both start and end date | (date: Date) => string | — |
placeholder | Placeholder khi chưa chọn khoảng. | string | "Select date range..." |
className | Class tuỳ chỉnh cho nút kích hoạt. | string | — |
label | Nhãn hiển thị phía trên. | string | — |
labelClassName | Class tuỳ chỉnh cho nhãn. | string | — |
required | Đánh dấu bắt buộc. | boolean | false |
disablePastDates | Disable selecting past dates (before today) | boolean | false |
minDate | Minimum selectable date (inclusive). Compared by day in local timezone. | Date | — |
maxDate | Maximum selectable date (inclusive). Compared by day in local timezone. | Date | — |
size | Size variant | FormControlSize | "md" |
disabled | Vô hiệu hoá bộ chọn khoảng thời gian. | boolean | false |
borderMode | Mã nguồn chưa cung cấp mô tả bổ sung. | BorderMode | — |
getPortalContainer | Resolve the document element that should receive the calendar portal. | () => HTMLElement | null | — |
Hướng dẫn sử dụng
Dùng DatePicker (with i18n) 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 DatePicker (with i18n), 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ế.