DatePicker

Properties

Property	Type	Default	Description
type	'day'|'month'|'year'	'day'	'day', 'month', 'year' 중 하나로, 표시할 날짜 단위를 정의합니다.
today	Date	new Date()	오늘 날짜를 정의합니다.
headerPatterns	object		헤더에 표시되는 날짜의 형식입니다. { day: 'YYYY.MM', month: 'YYYY', year: '{YYYY} ~ {YYYY}' }
patterns	Record<'day'|'month'|'year', string>		표시되는 날짜의 형식입니다. { day: 'YYYY.MM.DD', month: 'YYYY.MM.DD', year: 'YYYY' }
allowRange	boolean	false	사용자가 날짜 범위를 선택할 수 있는지 여부입니다.
allowDates	(date: Date) => boolean		선택 가능한 날짜를 정의하는 함수입니다.
selectedRange	Array<Date>		선택된 날짜 범위를 정의합니다. [new Date('2020/1/1'), new Date('2020/1/31')] 형태로 설정됩니다.
selectedDate	Date		선택된 날짜를 정의합니다. new Date('2020/1/1') 형태로 설정됩니다.
selectedDateString	string		선택된 날짜를 문자열로 반환합니다. 포맷터와 pattern 속성에 의해 결정됩니다.
label	string	''	입력 필드의 레이블 텍스트입니다.
clearable	boolean	false	입력 필드에 값이 있을 때 초기화 버튼 활성화 여부입니다.
placeholder	string		입력 필드에 값이 입력되지 않는 경우 표시되는 텍스트입니다.
titlePatterns	object		타이틀에 표시되는 날짜의 형식입니다. { day: 'YYYY.MM.DD', month: 'YYYY.MM', year: 'YYYY' }
coordinateMode	'global'|'relative'|'none'	'relative'	팝업의 좌표 시스템을 설정합니다. 'global': 전역 배치, 'relative': 상대 배치, 'none': 적용 안 함

Methods

Method	Parameters	Description
clear	void	선택된 날짜를 삭제합니다.
reset	void	선택된 날짜로 이동하거나, 선택된 날짜가 없는 경우 오늘 날짜로 이동합니다.
setCurrentDate	(date: Date)	화면에 출력된 날짜 목록을 해당 날짜로 이동합니다.
getState	void	현재 표시되는 날짜 상태('day', 'month', 'year')를 반환합니다.
open	void	날짜선택 팝업을 엽니다.
close	void	날짜선택 팝업을 닫습니다.

Events

Event	Type	Description
selection-changing	(event: SelectionEvent<T>) => void	아이템이 선택되기 전에 발생합니다. preventDefault를 호출하여 선택을 취소할 수 있습니다.
selection-change	(event: SelectionEvent<T>) => void	아이템이 선택된 후에 발생합니다.
state-change	(event: CustomEvent<{value: DateType; oldValue: DateType}>) => void	달력의 상태가 변경될 때마다 발생합니다.
item-down	(event: ItemEvent<DateItem>) => void	아이템에 마우스 다운했을 때 발생합니다.
item-click	(event: ItemEvent<DateItem>) => void	아이템에 마우스 클릭했을 때 발생합니다.
date-picker-opening	(event: CustomEvent<DateRange>) => void	날짜 선택 팝업이 열리기 전에 발생합니다.
date-picker-closing	(event: CustomEvent<DateRange>) => void	날짜 선택 팝업이 닫히기 전에 발생합니다.
date-picker-open	(event: CustomEvent<DateRange>) => void	날짜 선택 팝업이 열릴 때 발생합니다.
date-picker-close	(event: CustomEvent<DateRange>) => void	날짜 선택 팝업이 닫힐 때 발생합니다.
date-picker-select	(event: CustomEvent<DateRange>) => void	날짜를 선택했을 때 발생합니다.