declare const BUTTON_PRESETS: readonly ["clear", "today"]; type LocaleFormats = { time: string; date: string }; /** * Language of the calendar. */ type Locale = { name: string; months: string[]; monthsShort: string[]; weekStart?: number; weekdays: string[]; weekdaysShort: string[]; weekdaysMin: string[]; formats: LocaleFormats; placeholder?: string; }; type InputFormats = { format: string; indexMap: Record<'year' | 'month' | 'day', number[]>; }; declare class PickerEvent { datepicker: SnowDatePicker; nativeEvent?: Event | null; constructor({ event, ...props }?: PickerEventProps); private assignData; } type CellType = 'day' | 'month' | 'year'; type EventManager = { on: { ( eventName: EventName, listener: PickerEventListenerMap[EventName] ): void; (eventName: string, listener: Function): void; }; off: { (eventName: keyof PickerEventMap, listener: Function): void; (eventName: string, listener: Function): void; }; trigger: { (eventName: keyof PickerEventMap, eventProps: PickerEventProps): any; (eventName: string, eventProps: PickerEventProps): any; (eventName: keyof PickerEventMap, eventProps: PickerEvent): any; (eventName: string, eventProps: PickerEvent): any; }; }; type PickerDateEvent = PickerEvent & { readonly date: Date; readonly prevDate: Date; }; type PickerViewEvent = PickerEvent & { readonly view: View; readonly prevView: View; }; type PickerCellEvent = PickerEvent & { readonly type: CellType; readonly date: Date; readonly $element: HTMLButtonElement; }; type PickerClickEvent = PickerCellEvent & { readonly nativeEvent: MouseEvent; }; type PickerEventMap = { changeView: PickerViewEvent; changeViewDate: PickerDateEvent; clickCell: PickerClickEvent; renderCell: PickerCellEvent; beforeSelect: PickerDateEvent; select: PickerDateEvent; focus: PickerCellEvent; show: PickerEvent; hide: PickerEvent; }; type PickerRenderCellReturns = { className?: string; innerHTML?: string; attrs?: Record; dataset?: Record; }; type PickerEventListenerMap = { changeView: (event: PickerViewEvent) => void; changeViewDate: (event: PickerDateEvent) => void; clickCell: (event: PickerCellEvent) => void; renderCell: (event: PickerCellEvent) => PickerRenderCellReturns | void; beforeSelect: (event: PickerDateEvent) => boolean | void; select: (event: PickerDateEvent) => void; focus: (event: PickerCellEvent) => void; show: (event: PickerEvent) => void; hide: (event: PickerEvent) => void; }; type PickerEventProps = { [key: string]: any; }; type Position = | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'; type DateLike = string | number | Date; type TitleFormat = { days: string; months: string; years: string; }; type View = 'days' | 'months' | 'years'; type ArrayElement = ArrayType extends readonly (infer ElementType)[] ? ElementType : never; type ButtonPresetType = ArrayElement; type ButtonOptions = { id?: string; className?: string; dataset?: Record; attrs?: Record; style?: Record; innerHTML?: string; onClick?: (event: MouseEvent, datepicker: SnowDatePicker) => any; }; type InternalOptions = { /** Add custom classes. */ className?: string; /** Get the formatted date according to the string of tokens passed in. By default, `YYYY-MM-DD` */ dateFormat?: string; /** Language of the calendar. */ locale?: Locale; /** Makes the calendar to be permanently visible */ inline: boolean; /** The active date */ selectedDate?: Date; /** The minimum date of calendar, Can't be set to less than `0100-01-01` */ minDate: Date; /** The maximum date of calendar, Can't be set to more than `9999-12-31` */ maxDate: Date; /** The initial view of the calendar. (e.g. `days` | `months` | `years`) By default, `days` */ view: View; /** The minimum view of the calendar. The values are same as view. By default, `days` */ minView: View; /** If `true`, dates from other months will be displayed in days view. By default, `true` */ showOtherMonths: boolean; /** If `true`, it will be possible to select dates from other months. By default, `true` */ selectOtherMonths: boolean; /** * If `true` , then selecting dates from another month will be causing transition to this month. By default, `true` */ moveOtherMonths: boolean; /** Whether to enable navigation when the maximum/minimum date is exceeded. By default, `true` */ navigationLoop: boolean; /** If `true`, the calendar will be hidden after selecting the date. By default, `true` */ autoClose: boolean; /** If `true`, then clicking on the active cell will remove the selection from it. By default, `true` */ toggleSelected: boolean; /** Title templates in the calendar navigation. */ titleFormat: TitleFormat; /** Enables keyboard navigation. By default, `true` */ shortcuts: boolean; /** Position of the calendar relative to the input field. By default, `bottom-start` */ position: Position; /** If `true`, the calendar will open & close with animation */ animation: boolean; /** If `true`, calendar apper with backdrop */ backdrop: boolean; /** Add buttons to bottom of calendar. */ buttons?: | ButtonPresetType | ButtonPresetType[] | ButtonOptions | ButtonOptions[]; /** If `true`, it will not be able to edit dates at input field. */ readOnly: boolean; /** Datepicker placeholder */ placeHolder?: string; /** If, `dark`, datepicker's color scheme set to dark mode */ theme: 'light' | 'dark'; /** The size of datepicker input. */ size: 'small' | 'normal'; onChangeView?: PickerEventListenerMap['changeView']; onChangeViewDate?: PickerEventListenerMap['changeViewDate']; onClickCell?: PickerEventListenerMap['clickCell']; onRenderCell?: PickerEventListenerMap['renderCell']; onBeforeSelect?: PickerEventListenerMap['beforeSelect']; onSelect?: PickerEventListenerMap['select']; onFocus?: PickerEventListenerMap['focus']; onShow?: PickerEventListenerMap['show']; onHide?: PickerEventListenerMap['hide']; }; type Options = Partial< Omit & { titleFormat: Partial; } >; type Converter = { readonly locale: Locale; readonly weekIndexes: number[]; format(value: any, format: string): string; time: (value: any) => string; date: (value: any) => string; localeMonth: (monthIndex: number, short?: boolean) => string; localeWeekday: (weekdayIndex: number, options?: 'short' | 'min') => string; }; declare class SnowDatePicker { private options; private instance; private eventManager; private originTemplate; private $container; private $hide; private components; private unsubscribers; /** ID of datepicker elements container */ static containerId: string; static createContainer: () => HTMLDivElement; /** * Element on which datepicker was initialized. * @type {HTMLElement} */ readonly $target: HTMLElement; /** * Datepicker input element * @type {HTMLInputElement} */ readonly $input: HTMLInputElement; /** * Datepicker calendar element * @type {HTMLDivElement} */ readonly $datepicker: HTMLDivElement; /** * Add event listener * @param {string} eventName The event name of datepicker. * @param {Function} listener The event listener. */ on: EventManager['on']; /** * Remove event listener * @param {string} eventName The event name of datepicker. * @param {Function} listener The event listener. */ off: EventManager['off']; /** * @param {Element | string} element * @param {Options} [options] */ constructor(element: Element | string, options?: Options); /** Converter instance for convert date to datepicker's locale format */ get converter(): Converter; /** * Current view of calendar * @returns {'years' | 'months' | 'days'} */ get currentView(): View; /** * Current view date * @returns {Date} */ get viewDate(): Date; /** * Selected date of calendar, if not selected returns `null` * @returns {Date | null} */ get selectedDate(): Date | null; /** * Focus date of calendar, if not focused returns `null` * @returns {Date | null} */ get focusDate(): Date | null; /** Rendering datepicker components */ private renderDatepicker; /** Update calendar position automatically */ private calendarPositionUpdate; /** Subscrie events */ private eventSubcribe; /** Hide calendar when click outside */ private handleClickOutside; /** * Set selected date of datepicker * @param {*} value The date to select * @example * * setSelectedDate(new Date(2024, 01, 01, 12)) // Thu Feb 01 2024 12:00:00 * setSelectedDate('invalid') // null */ setSelectedDate(value: any): void; /** * Set view date of datepicker * @param {DateLike} value The view date to change. */ setViewDate(value: DateLike): void; /** * Set current view of datepicker * @param {View} value The view to change. (e.g. `days` | `months` | `years`) */ setCurrentView(value: View): void; /** * Set focus date of datepicker * @param {*} value The value to change */ setFocusDate(value: any): void; /** * Check arguments date is same date in given view. * @param {Date} date The value to check * @param {Date} compare The value to compare * @param {'days' | 'months' | 'years'} view The view state to use for comparison. * @returns {boolean} Returns the value and compare in the same view * @example * * isSameDate(new Date('2024-01-01'), new Date('2024-01-30')) // false * isSameDate(new Date('2024-01-01'), new Date('2024-01-30'), 'months') // true */ isSameDate(date: Date, compare: Date, view?: View): boolean; private addViewDate; /** Move to next `month` | `years` | `decade` */ next(): void; /** Move to previous `month` | `years` | `decade` */ prev(): void; /** Hide calendar */ hide(): void; /** Show calendar */ show(): void; /** * Set datepicker theme mode * @param {'light' | 'dark'} theme */ setTheme(theme: 'light' | 'dark'): void; setSize(size: 'small' | 'normal'): void; /** Datepicker calendar is visible */ isShow(): boolean; /** Delete datepicker */ destroy(): void; } export { type ButtonOptions, type ButtonPresetType, type Converter, type DateLike, type EventManager, type InputFormats, type InternalOptions, type Locale, type Options, type PickerCellEvent, type PickerClickEvent, type PickerDateEvent, type PickerEventListenerMap, type PickerEventMap, type PickerEventProps, type PickerRenderCellReturns, type PickerViewEvent, type Position, type TitleFormat, type View, SnowDatePicker as default };