DateChooser

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.

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').

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.