Date picker

캘린더를 통해 특정 날짜를 선택할 수 있게 해주는 요소로 월 단위 탐색, 연도 선택, 오늘 날짜 표시 등의 기능을 제공하며, 날짜 형식 오류를 방지하고 일관된 데이터 입력을 보장합니다.

Anatomy

  1. 1. Year and month control
  2. 2. Navigation
  3. 3. Current date
  4. 4. Start day
  5. 5. Range of selected days
  6. 6. End day
  7. 7. Picker action area

Variants

Description

Variants
Action area
Action area/Leading contents

States

Normal

Range

Size

Action area 여부에 따라 높이가 차이 날 수 있습니다. Picker 호출 시 호출 요소와의 간격 유지를 위해 8px의 Safe area를 유지합니다.

Range select

각각의 싱글 필드로 시작, 종료 날짜를 선택하여 기간을 지정합니다. 사용자 혹은 특정 프로젝트 내에서 지정 날짜를 제공하지 않을 시 ‘오늘’을 기준으로 캘린더 뷰를 제공합니다.

Format type

다양한 날짜 포맷의 사용을 방지하고자 디자인에서는 포맷을 제한하고 있습니다. 기본 표현 방식을 권장하고 있으나 표현 공간이 협소할 때에는 Short, 특정 지정된 날짜를 강조하고자 할 때에는 Long 타입을 사용할 수 있습니다.

  • 개발 지원 포맷 = YYYY(2025), YY(25) / M(1), MM(01), MMM(Jan), MMMM(January) / D(1), DD(01)
  • 디자인 지원 포맷 = YYYY. MM. DD(2025. 03. 05),YYYY년 M월 D일(2025년 3월 5일), YY/M/D
  • 표현 방식 예시
    • 포맷: YYYY. MM. DD
    • 결과: 2025. 01. 01

Localization

  • Locale: ko-KR을 기본 값으로 두고 있으며, Locale에 따라 시간 표현 방식과 Format에 영향을 미칩니다. 이 때 국가 코드 별 연도, 월, 일의 표기 방법을 고려하여 작업합니다.
  • Timezone: 사용자의 환경에 따라 결정 됩니다.

Accessibility

Date picker field

KeyDescription
ArrowRight다음 항목으로 포커스를 이동합니다.
ArrowLeft이전 항목으로 포커스를 이동합니다.
ArrowUp선택된 항목을 다음 값으로 변경합니다.
ArrowDown선택된 항목을 이전 값으로 변경합니다.
End선택된 항목을 마지막 값으로 변경합니다.
Home선택된 항목을 첫 번째 값으로 변경합니다.

Year and month view

KeyDescription
ArrowRight다음 값으로 포커스를 이동합니다.
ArrowLeft이전 값으로 포커스를 이동합니다.
ArrowUp상단 값으로 포커스를 이동합니다.
ArrowDown하단 값으로 포커스를 이동합니다.
Home첫 번째 값으로 포커스를 이동합니다.
End마지막 값으로 포커스를 이동합니다.
EscapePicker를 닫습니다.

Day view

KeyDescription
ArrowRight다음 값으로 포커스를 이동합니다.
ArrowLeft이전 값으로 포커스를 이동합니다.
ArrowUp일주일 전 값으로 포커스를 이동합니다.
ArrowDown일주일 후 값으로 포커스를 이동합니다.
Home첫 번째 값으로 포커스를 이동합니다.
End마지막 값으로 포커스를 이동합니다.
PageUp다음 달로 포커스를 이동합니다.
PageDown이전 달로 포커스를 이동합니다.
EscapePicker를 닫습니다.

Mobile

  • Web: Picker는 Popover 형태로 사용하며 Bottom sheet, Modal 등으로 형태를 변경할 수 없습니다. 화면에서 필드의 위치에 따라 Picker가 뜨는 위치를 자동으로 계산하여 노출됩니다.
  • iOS: Native Wheel, Calender를 사용합니다. Bottom sheet, Popup modal을 자유롭게 활용할 수 있습니다.
  • Android: Native를 사용합니다. Input, Picker, Wheel 등 상황에 맞게 다양한 타입으로 사용할 수 있습니다.

Usage

Current time

사용자가 ‘오늘’ 날짜를 입력해야 할 때에는 편의상 바로 ‘오늘’ 날짜를 적용할 수 있도록 버튼을 제공합니다.

Icon button

Text field를 기본으로 사용할 때에는 Picker 호출이라는 명확한 행동을 사용자가 유추할 수 있도록 Trailing content에 Icon button을 배치하여 사용합니다. 날짜는 Field에 직접 입력하거나 Icon button을 눌러 Picker로 선택 할 수 있습니다.

How to use

Do

Placeholder 혹은 Heading으로 입력 폼에 대한 명확한 입력 형식을 안내합니다.

Don’t

Picker의 폭을 임의로 늘리거나 줄이지 않습니다.

© 2026 Wanted Lab, Inc.