Datepicker
<dg-datepicker> — single / range, button bar, week numbers, min/max, disabled days/dates, body portal, ControlValueAccessor.
Cơ bản (single, popup)
Input có sẵn mask theo format (auto-insert dấu /) và lọc ký tự không phải số. Khi blur mà text không parse ra ngày hợp lệ → tự revert.
value: —
keepInvalid (giữ text dù không hợp lệ)
Mặc định keepInvalid=false → blur revert. Bật keepInvalid=true để giữ nguyên text user gõ (ví dụ với form custom validators).
Range
Inline (always-visible calendar)
| Wk | Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|---|
| 18 | 27 | 28 | 29 | 30 | 1 | 2 | 3 |
| 19 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 20 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 21 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
| 23 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
value: 5/9/2026
Min / Max + disabled days & dates
minDate = hôm nay, maxDate = +30 ngày, disabledDays = thứ 7, CN, disabledDates = mai & mốt.
Reactive form (CVA), variant=filled, size=small
appendTo body (escape clipped container)
Trong container có overflow: hidden. Mặc định panel sẽ bị cắt. Dùng appendTo="body" để render panel trực tiếp vào body.
overflow: hidden zone (height: 64px)