JS Design System v0.6

Date Picker

날짜 또는 기간을 선택합니다. 로그 조회·리포트 기간처럼 '오늘 기준 최근 N일' 프리셋을 함께 제공합니다.

1. Default

날짜 하나를 고르는 기본 필드입니다.

2. Field

닫힌 상태. 값이 없으면 플레이스홀더, 기간은 ~ 구분.

3. Calendar

열린 상태의 달력. 오늘(.today), 선택(.on), 다른 달(.muted), 선택 불가([disabled]).

4. Range

기간 선택. 시작·끝은 .on, 사이는 .in-range.

Props

HTML 에서는 클래스와 속성으로, React(@jiran/ds-react)에서는 같은 이름의 prop(variant · size …)으로 변형·상태를 지정합니다.

Prop / ClassType · ValuesDefaultDescription
.datepickercontainer—label + .field-btn(+ .calendar). 열림은 .open
.field-btnbutton—값 표시 트리거. 기간은 .sep 로 구분
.calendarpopover—.cal-head + .cal-grid(.dow ×7, .day ×42) + .cal-foot
.day.on / .in-range / .today / .mutedstate—선택 / 기간 사이 / 오늘 / 다른 달
disabledattribute—선택 불가 날짜

Usage

React: @jiran/ds-react 패키지를 설치하고 style.css 를 한 번 import 하면 위 React 탭 코드를 그대로 쓸 수 있습니다(React Package). HTML: assets/style.css 를 연결하고(일부만 필요하면 아래 컴포넌트 CSS 복사), 동작이 필요하면 assets/ds.js 를 함께 넣습니다 — 이 페이지의 프리뷰가 그 스크립트로 동작합니다. 색은 전부 토큰(var(--accent) 등)을 참조하므로 --accent-* 만 제품 컬러로 바꾸면 됩니다.

React @jiran/ds-react

npm i @jiran/ds-react

// main.tsx — 앱 진입점에서 한 번
import "@jiran/ds-react/style.css";

// 컴포넌트
import { Calendar, DatePicker, formatDate } from "@jiran/ds-react";

HTML

<!-- 1) 토큰 + 전체 컴포넌트 스타일 한 번에 연결 -->
<link rel="stylesheet" href="assets/style.css">
<!-- 동작(드롭다운·탭·달력·표 정렬/선택·토스트 등) — 순수 JS 한 파일. React 제품은 불필요 -->
<script src="assets/ds.js" defer></script>

<!-- 2) 또는 아래 "Component CSS" 만 프로젝트 CSS 에 붙이고,
        :root 토큰은 Foundations › Design Token 에서 복사 -->

Component CSS .datepicker, .calendar

/* JS Design System v0.6 · .datepicker, .calendar · 토큰(var(--*))은 assets/style.css :root 참고 */
.datepicker{display:inline-flex;flex-direction:column;gap:6px;position:relative;font-size:14px}
.datepicker label{font-weight:600}
.datepicker .field-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;min-width:240px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);font:inherit;font-size:14px;color:var(--text-primary);cursor:pointer;text-align:left}
.datepicker .field-btn:hover{border-color:var(--border-strong)}
.datepicker .field-btn svg{width:18px;height:18px;color:var(--text-tertiary);margin-left:auto}
.datepicker .field-btn .placeholder{color:var(--text-disabled)}
.datepicker .field-btn .sep{color:var(--text-disabled)}
.datepicker.open .field-btn{border-color:var(--border-focus)}
.datepicker .calendar{position:absolute;top:calc(100% + 4px);left:0;z-index:5;display:none}
.datepicker.open .calendar{display:block}
.calendar{width:296px;padding:12px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);font-size:12px}
.calendar .cal-head{display:flex;align-items:center;justify-content:space-between;font-weight:600;padding:0 4px 8px}
.calendar .cal-head button{border:0;background:transparent;font:inherit;cursor:pointer;width:28px;height:28px;border-radius:6px;color:var(--text-secondary)}
.calendar .cal-head button:hover{background:var(--bg-subtle)}
.calendar .cal-head button{display:grid;place-items:center}
.calendar .cal-head button svg{width:16px;height:16px}
.calendar .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.calendar .dow{font-size:12px;color:var(--text-tertiary);padding:4px 0;font-weight:600}
.calendar .day{height:34px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:12px;color:var(--text-primary);cursor:pointer}
.calendar .day:hover{background:var(--bg-subtle)}
.calendar .day.muted{color:var(--text-disabled)}
.calendar .day.today{font-weight:700;color:var(--accent-text)}
.calendar .day.in-range{background:var(--accent-subtle);border-radius:0}
.calendar .day.on{background:var(--accent);color:var(--accent-on);font-weight:600}
.calendar .day[disabled]{opacity:.35;cursor:not-allowed}
.calendar .cal-foot{display:flex;justify-content:flex-end;gap:6px;padding-top:10px;margin-top:6px;border-top:1px solid var(--border-default)}