Ô chọn ngày
Dành cho giá trị người ta chọn trên lịch — ngày bắt đầu làm, khoảng thời gian.
Xem trước trực tiếp
Nguồn
<div class="dc-date">
<label class="dc-date__label" for="dc-date-a">근무 시작일</label>
<input class="dc-date__input" id="dc-date-a" type="date" value="2026-10-05" min="2026-09-13" max="2027-09-30" aria-describedby="dc-date-a-hint" />
<p class="dc-date__hint" id="dc-date-a-hint">오늘 이후 날짜만 고를 수 있습니다</p>
</div>.dc-date { max-width:360px; font-family:var(--dc-font); }
.dc-date__label { display:block; margin-bottom:var(--dc-2); font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-date__input { width:100%; min-height:44px; padding:var(--dc-2) var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font:inherit; font-size:15px; font-variant-numeric:tabular-nums; }
.dc-date__input:hover { border-color:var(--dc-line-bold); }
.dc-date__input:focus-visible { outline:2px solid var(--dc-brand); outline-offset:1px; border-color:var(--dc-brand); }
.dc-date__input::-webkit-calendar-picker-indicator { opacity:.6; cursor:pointer; }
.dc-date__input:hover::-webkit-calendar-picker-indicator { opacity:1; }
.dc-date__input.is-error { border-color:var(--dc-danger); background:var(--dc-danger-soft); }
.dc-date__pair { display:flex; align-items:center; gap:var(--dc-2); }
.dc-date__sep { flex:0 0 auto; color:var(--dc-text-mute); }
.dc-date__hint { margin:var(--dc-2) 0 0; font-size:12px; color:var(--dc-text-mute); }
.dc-date__error { margin:var(--dc-2) 0 0; font-size:12px; font-weight:600; color:var(--dc-danger); }Cách dùng
- Dùng type=date để lịch mở ra; đừng để người nhập tự đoán định dạng
- Chặn ngày không hợp lệ bằng min và max, thay vì báo lỗi sau khi đã nhập
- Với một khoảng, đặt ngày bắt đầu và kết thúc cạnh nhau rồi đặt tên cho cả nhóm
Điểm cần lưu ý
- Hai ô của khoảng đều cần label — dấu "~" không cho biết ô nào là ngày bắt đầu
- Viết thông báo lỗi theo cách sửa ("chọn từ hôm nay trở đi"), đừng viết "sai định dạng"