Calendar
CoreLịch tương tác hỗ trợ 3 chế độ chọn ngày: single, range, multiple. Xây dựng trên react-day-picker với locale và disabled rules linh hoạt.
Cài đặt
Import
TSX
Single Date
Chọn một ngày duy nhất.
May 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Date Range
Chọn khoảng thời gian từ ngày đến ngày.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Multiple Dates
Chọn nhiều ngày rời nhau.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Chặn ngày
Giới hạn vùng ngày có thể chọn.
disablePastDates
May 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
disableFutureDates
May 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
disabled
May 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Kích thước
3 kích thước cho các ô ngày.
sm
May 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
md (default)
May 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
lg
May 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Nhiều tháng
Hiển thị nhiều tháng song song.
May 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
June 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Locale
Hỗ trợ nhiều ngôn ngữ từ react-day-picker.
vi
Tháng Năm 2026
| Th 2 | Th 3 | Th 4 | Th 5 | Th 6 | Th 7 | CN |
|---|---|---|---|---|---|---|
ja
2026年5月
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|
API Reference
| Prop | Type | Default | Mô tả |
|---|---|---|---|
mode | "single" | "range" | "multiple" | "single" | Chế độ chọn: một ngày, khoảng ngày, hoặc nhiều ngày rời |
selected | Date | DateRange | Date[] | — | Giá trị đang được chọn, kiểu tương ứng với mode |
onSelect | (value: Date | DateRange | Date[] | undefined) => void | — | Callback khi người dùng thay đổi lựa chọn |
size | "sm" | "md" | "lg" | "md" | Kích thước các ô ngày trong lịch |
disabled | boolean | false | Vô hiệu hóa toàn bộ calendar |
disablePastDates | boolean | false | Chặn chọn tất cả ngày trước hôm nay |
disableFutureDates | boolean | false | Chặn chọn tất cả ngày sau hôm nay |
locale | keyof typeof locales | "enUS" | Ngôn ngữ hiển thị (vi, enUS, ja, fr, ...) |
numberOfMonths | number | 1 | Số tháng hiển thị song song |
showOutsideDays | boolean | true | Hiện các ngày của tháng liền kề |
className | string | — | Class tuỳ chỉnh cho DayPicker bên trong |
wrapperClassName | string | — | Class tuỳ chỉnh cho wrapper ngoài cùng |