DatePicker

날짜를 선택할 수 있는 캘린더 기반 입력 컴포넌트

개요

DatePicker는 단일 날짜 또는 날짜 범위를 선택하는 폼 컴포넌트입니다. 캘린더 팝업과 직접 입력을 모두 지원하며, FormItem을 통합합니다.

주요 특징

• ✅ 두 가지 모드: 단일 날짜, 범위 선택
• ✅ 직접 입력: 캘린더 외 텍스트 직접 입력
• ✅ 범위 제한: minDate, maxDate 설정
• ✅ FormItem 통합: 레이블, 설명, 에러 메시지
• ✅ 접근성: 키보드 네비게이션, ARIA 속성
• ✅ 디자인 토큰: 테마 커스터마이징 지원

Variants

단일 날짜 모드 (기본)

<DatePicker label="분석 날짜" />

범위 모드

<DatePicker mode="range" label="분석 기간" />

Variant 설명

States

<DatePicker label="기본" />
<DatePicker label="비활성화" disabled />
<DatePicker label="읽기 전용" readOnly />
<DatePicker label="에러" error="날짜를 선택해주세요" required />
<DatePicker label="설명 포함" description="분석 시작 날짜를 선택하세요" />
<DatePicker label="클리어 불가" clearable={false} />

사용 예시

예시 1: 분석 날짜 선택

특정 날짜의 데이터를 조회합니다.

<DatePicker label="조회 날짜" placeholder="날짜 선택" />

예시 2: 분석 기간 설정

시작일과 종료일을 선택합니다.

<DatePicker
  mode="range"
  label="분석 기간"
  startPlaceholder="시작일"
  endPlaceholder="종료일"
/>

예시 3: 날짜 범위 제한

특정 범위 내에서만 날짜를 선택할 수 있습니다.

<DatePicker
  label="리포트 날짜"
  description="최근 90일 이내 날짜만 선택 가능"
  minDate={new Date(Date.now() - 90 * 24 * 60 * 60 * 1000)}
  maxDate={new Date()}
/>

API Reference

Props (공통)

Single Mode Props

Range Mode Props

기본 사용법

import { DatePicker } from "@vortex/ui-icignal"
 
// 단일 날짜
<DatePicker label="날짜" />
 
// 범위 선택
<DatePicker mode="range" label="기간" />

접근성

ARIA 속성

<DatePicker label="분석 날짜" />

권장 사항

• ✅ label로 날짜 선택 목적 전달
• ✅ 키보드: Tab으로 이동, 캘린더 내 Arrow 키 네비게이션
• ✅ 날짜 형식 안내 (placeholder 활용)
• ❌ minDate/maxDate 없이 과거/미래 무제한 허용 지양

관련 컴포넌트

• Input: 텍스트 입력
• Select: 드롭다운 선택
• InputNumber: 숫자 입력