Components
Date Picker
Dựng từ contract .Primitives/Date-Picker/Day-Cell, gồm 42 variant, properties State × Selection.
Component này là primitive (Day Cell), chưa phải Date Picker hoàn chỉnh. Phần khó của date picker nằm ở hành vi: tính ngày tháng, điều hướng bàn phím, ARIA, chọn khoảng. Ứng dụng React nên dùng react-day-picker thay vì tự viết. Trang này chỉ ghi lại phần hình, gồm 42 tổ hợp trạng thái của một Day Cell.
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
API
Props
| Property | Values | Default | Description |
|---|---|---|---|
day | number | 15 | Số ngày hiển thị trong ô |
state | default · hover · today · disabled · focused · outside · pressed | default | |
selection | no · selected · range-start · range-mid · range-end · range-preview | no |
Section 01
Day Cell
Section 02
State × Selection (42)
defaulthovertodaydisabledfocusedoutsidepressednoselectedrange-startrange-midrange-endrange-preview
Range-Preview là khoảng ngày hiện tạm khi rê chuột, lúc đã chọn ngày đầu mà chưa chọn ngày cuối. Thư viện không có sẵn trạng thái này, nên phải tự tính.
Section 03
Selection
Selection
no
selected
range-start
range-mid
range-end
range-preview
Section 04
In Calendar
Range
T2T3T4T5T6T7CN
Lưới này tĩnh: không có điều hướng và không biết hôm nay là ngày nào. Lưới chỉ để xem Day Cell trong ngữ cảnh thật thay vì xem rời từng ô.