DatePicker

Properties

Property	Type	Default	Description
type	'day'|'month'|'year'	'day'	Defines the date unit to display as one of 'day', 'month', or 'year'.
today	Date	new Date()	Defines today's date.
headerPatterns	object		Format of the date displayed in the header. { day: 'YYYY.MM', month: 'YYYY', year: '{YYYY} ~ {YYYY}' }
patterns	Record<'day'|'month'|'year', string>		Format of the displayed date. { day: 'YYYY.MM.DD', month: 'YYYY.MM.DD', year: 'YYYY' }
allowRange	boolean	false	Whether users can select a date range.
allowDates	(date: Date) => boolean		Function that defines selectable dates.
selectedRange	Array<Date>		Defines the selected date range. Set in the form of [new Date('2020/1/1'), new Date('2020/1/31')].
selectedDate	Date		Defines the selected date. Set in the form of new Date('2020/1/1').
selectedDateString	string		Returns the selected date as a string. Determined by the formatter and pattern property.
label	string	''	Label text for the input field.
clearable	boolean	false	Whether to enable the reset button when the input field has a value.
placeholder	string		Text displayed when no value is entered in the input field.
titlePatterns	object		Format of the date displayed in the title. { day: 'YYYY.MM.DD', month: 'YYYY.MM', year: 'YYYY' }
coordinateMode	'global'|'relative'|'none'	'relative'	Sets the coordinate system for the popup. 'global': global placement, 'relative': relative placement, 'none': no placement

Methods

Method	Parameters	Description
clear	void	Deletes the selected date.
reset	void	Moves to the selected date, or to today's date if no date is selected.
setCurrentDate	(date: Date)	Moves the displayed date list to the specified date.
getState	void	Returns the current display state ('day', 'month', 'year').
open	void	Opens the date selection popup.
close	void	Closes the date selection popup.

Events

Event	Type	Description
selection-changing	(event: SelectionEvent<T>) => void	Occurs before an item is selected. Selection can be cancelled by calling preventDefault.
selection-change	(event: SelectionEvent<T>) => void	Occurs after an item is selected.
state-change	(event: CustomEvent<{value: DateType; oldValue: DateType}>) => void	Occurs whenever the calendar's state changes.
item-down	(event: ItemEvent<DateItem>) => void	Occurs when mouse down on an item.
item-click	(event: ItemEvent<DateItem>) => void	Occurs when mouse click on an item.
date-picker-opening	(event: CustomEvent<DateRange>) => void	Occurs before the date selection popup opens.
date-picker-closing	(event: CustomEvent<DateRange>) => void	Occurs before the date selection popup closes.
date-picker-open	(event: CustomEvent<DateRange>) => void	Occurs when the date selection popup opens.
date-picker-close	(event: CustomEvent<DateRange>) => void	Occurs when the date selection popup closes.
date-picker-select	(event: CustomEvent<DateRange>) => void	Occurs when a date is selected.