OP-가이드-Date Picker

Date Picker

좌측 코드가 전달용 마크업, 우측이 적용 UI. 날짜칸을 클릭하면 달력이 열립니다. (flatpickr · 한글 · 톤앤매너 테마)

단일 날짜 .input 에 data-datepicker 속성만 추가

<div class="f-date">
  <input type="text" class="input" value="2026.06.04" data-datepicker />
  <i class="ico ico-calendar"></i>
</div>

<!-- 아이콘 없이 <input class="input" data-datepicker> 만 써도 동작 -->

Normal (클릭해 보세요)

날짜 범위 (시작 ~ 종료) data-daterange 래퍼 안에 -start / -end · 시작일 ≤ 종료일 자동 연동

<div class="f-period" data-daterange>
  <div class="f-date">
    <input type="text" class="input" value="2026.06.04" data-datepicker-start />
    <i class="ico ico-calendar"></i>
  </div>
  <span class="date-sep">-</span>
  <div class="f-date">
    <input type="text" class="input" value="2026.06.30" data-datepicker-end />
    <i class="ico ico-calendar"></i>
  </div>
</div>

시작 ≤ 종료 연동

월 전용 (연·월) .input 에 data-monthpicker · 12개월 그리드(3열) · 표시 Y.m

<div class="f-date">
  <input type="text" class="input" value="2026.06" data-monthpicker />
  <i class="ico ico-calendar"></i>
</div>

<!-- data-datepicker(일 단위)와 별개 트리거 · 연 이동 후 월 클릭 -->

월만 선택 (클릭해 보세요)

달력 상태 (자동) 색은 전부 디자인 토큰 · 별도 마크업 불필요

/* modules/_datepicker.scss (테마) */
선택일     = Primary 보라 원   (--color-point)
오늘       = 회색 fill 원      (--n-100)
기간 중간  = 연보라           (--p-100)
요일 헤더  = N-500 / 흐린날짜 = N-300 / 화살표 = N-600
글자       = Pretendard · --fs-*

클릭해 달력에서 확인