DatePicker

Datepicker는 특정 날짜나 기간을 선택할 수 있는 컴포넌트입니다.

TypescriptWAI-ARIA

데이트 피커를 구성하는 요소를 설명합니다.

Disabled
정보 입력 전에는 비활성화 상태이며 정보가 입력된 후부터 버튼이 활성 상태로 전환됩니다.
Selecting a range
기간 선택은 3가지 방법으로 진행할 수 있습니다. Datepicker input text field에 형식에 맞춰 시작일과 종료일을 입력합니다. Range items에서 제공하고 있는 기간을 선택합니다. Calendar에서 시작일과 종료일을 각각 다른 날짜로 선택합니다.
Localization
날짜는 영문일 때 dd.mm.yyyy로 표기하며 국문일 때 yyyy.mm.dd로 표기합니다.
Reset button
default로 설정된 기간이 아닌 다른 기간이 선택되어있을 때 초기화 버튼이 활성화됩니다. 초기화 버튼 클릭 시 default로 설정된 기간이 선택되고, 초기화 버튼은 보여지지 않습니다.

import { DatePicker } from '@goorm-dev/vapor-components';

name	description	default
size	DatePicker의 크기를 설정합니다. xllgmdsm	md
locale	DatePicker의 언어를 설정합니다. koenja	ko
classNameDatePicker	DatePicker의 클래스 이름을 설정합니다. string
dropDirection	DatePicker의 드롭 방향을 설정합니다. updownleftright	down
dropMenuRight	DatePicker의 드롭 메뉴의 위치를 오른쪽으로 설정합니다. boolean	false
disabled	DatePicker를 비활성화합니다. boolean	false
disabledApplyButton	DatePicker의 적용 버튼을 비활성화합니다. boolean	true
label	DatePicker의 기본 라벨을 설정합니다. string	버튼 label
container	DatePicker의 DropdownMenu의 컨테이너를 설정합니다. stringHTMLElementReact.RefObject<HTMLElement>	null
date	외부에서 date 값을 설정하고 싶을 때 사용합니다. Date[]
defaultDate	DatePicker의 기본 날짜를 설정합니다. string
disableDate	DatePicker에서 선택할 수 없는 날짜를 설정합니다. string	[object Object]
onApply	DatePicker에서 날짜를 선택하고 적용 버튼을 클릭했을 때 실행되는 함수입니다. function
onDropdownToggle	DatePicker의 드롭다운 메뉴를 토글할 때 실행되는 함수입니다. function
showSideBar	DatePicker의 사이드바를 표시합니다. boolean	true
sideBarDate	DatePicker의 사이드바의 날짜를 설정합니다. {id : ``, text : ``, date : ``} string