Month
MonthPicker và YearPicker chọn một tháng hoặc một năm, cùng vỏ và bàn phím với DatePicker.
Date: ngày 1 của tháng, hoặc 1/1 của năm. minDate / maxDate làm mờ ô ngoài khoảng. Hiển thị theo locale của YugenProvider ("November 2026", "tháng 11 năm 2026"); đổi bằng formatDate.Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
// npm install yugen-uiimport { MonthPicker, YearPicker } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
YearPicker
maxDate là năm nay; clearable thêm nút xoá.
Tháng báo cáo, kích thước & disabled
Cùng size và trạng thái với DatePicker.
Cách dùng
- Dùng MonthPicker khi ngày không quan trọng (hạn thẻ, kỳ báo cáo, tháng lương).
- Đặt minDate / maxDate thay vì kiểm tra sau khi chọn.
- Không dùng YearPicker cho năm sinh trải rộng nhiều thập kỷ nếu người dùng gõ nhanh hơn — một ô số có thể hợp hơn.
- Không đọc ngày (getDate) của giá trị — luôn là ngày 1.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| value / defaultValueDate | null | Mặc định: — | Tháng (ngày 1) hoặc năm (1/1) đã chọn. |
| onValueChange(date: Date | null) => void | Mặc định: — | Gọi khi chọn hoặc xoá; null khi xoá. |
| minDate / maxDateDate | Mặc định: — | Tháng / năm sớm và muộn nhất được chọn. |
| formatDate(date: Date) => string | Mặc định: — | Định dạng hiển thị; mặc định tháng + năm (MonthPicker), năm (YearPicker) theo locale. |
| placeholderstring | Mặc định: "Select a month…" / "Select a year…" | Chữ khi chưa chọn. |
| clearableboolean | Mặc định: false | Hiện nút xoá khi có giá trị. |
| size"small" | "medium" | "large" | Mặc định: "medium" | Chiều cao 24 / 32 / 40px. |
| disabled / required / id / aria-*— | Mặc định: — | Field tự truyền khi bọc trong <Field>. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.monthPicker
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| placeholderstring Placeholder khi chưa chọn tháng. | Mặc định (tiếng Anh)"Select a month…" | messagesVi"Chọn tháng…" |
| clearstring aria-label nút xoá giá trị ( | Mặc định (tiếng Anh)"Clear" | messagesVi"Xoá giá trị" |
| previousYearstring aria-label nút sang năm trước / năm sau. | Mặc định (tiếng Anh)"Previous year" | messagesVi"Năm trước" |
| nextYearstring | Mặc định (tiếng Anh)"Next year" | messagesVi"Năm sau" |
messages.yearPicker
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| placeholderstring Placeholder khi chưa chọn năm. | Mặc định (tiếng Anh)"Select a year…" | messagesVi"Chọn năm…" |
| clearstring aria-label nút xoá giá trị ( | Mặc định (tiếng Anh)"Clear" | messagesVi"Xoá giá trị" |
| previousYearsstring aria-label nút sang 12 năm trước / sau. | Mặc định (tiếng Anh)"Earlier years" | messagesVi"Các năm trước" |
| nextYearsstring | Mặc định (tiếng Anh)"Later years" | messagesVi"Các năm sau" |