Kolom tanggal
Untuk nilai yang orang ambil dari kalender — tanggal mulai kerja, atau rentang hari.
Pratinjau langsung
Sumber
<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); }Cara memakainya
- Pakai type=date agar kalender terbuka; jangan serahkan format pada yang mengetik
- Hadang tanggal yang tak mungkin dengan min dan max, bukan menegur setelahnya
- Untuk rentang, letakkan awal dan akhir bersebelahan dan beri nama satu grup
Hal yang perlu diwaspadai
- Dua sisi rentang tetap butuh label — tanda "~" tak menjelaskan mana yang awal
- Tulis galat sebagai cara memperbaiki ("pilih hari ini atau sesudahnya"), bukan "format salah"