diff --git a/docs/en/reference/additionally/actions.mdx b/docs/en/reference/additionally/actions.mdx index 9437be70..758317ef 100644 --- a/docs/en/reference/additionally/actions.mdx +++ b/docs/en/reference/additionally/actions.mdx @@ -139,19 +139,19 @@ The method is triggered after changing the time in any way. The parameters that `Default: null` -`Options: changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) => void | null` +`Options: changeToInput(e, calendar, dates, time, hours, minutes, keeping) => void | null` ```js new VanillaCalendar('#calendar', { actions: { - changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) {}, + changeToInput(e, calendar, dates, time, hours, minutes, keeping) {}, }, }); ``` For this method to work, the parameter `input` with the value `true` is required. The method is triggered after clicking on a day in the calendar or changing the time in any way. -Parameters that can be received: `e` - event, `HTMLInputElement` - HTML element that is an input field, `dates` - array of selected dates, `time` - selected time, `hours` - selected hour, `minutes ` is the selected minutes, `keeping` is the selected AM/PM marker. +Parameters that can be received: `e` - event, `calendar` - an object containing `HTMLInputElement`, `HTMLElement` and methods `show()`, `hide()`, `dates` - array of selected dates, `time` - selected time, `hours` - selected hour, `minutes ` is the selected minutes, `keeping` is the selected AM/PM marker. --- diff --git a/docs/en/reference/additionally/css-classes.mdx b/docs/en/reference/additionally/css-classes.mdx index be5ccf14..c0cd560a 100644 --- a/docs/en/reference/additionally/css-classes.mdx +++ b/docs/en/reference/additionally/css-classes.mdx @@ -14,7 +14,6 @@ new VanillaCalendar('#calendar', { calendarYear: 'vanilla-calendar_year', calendarHidden: 'vanilla-calendar_hidden', calendarToInput: 'vanilla-calendar_to-input', - calendarInputWrapper: 'vanilla-calendar-input-wrapper', controls: 'vanilla-calendar-controls', grid: 'vanilla-calendar-grid', gridDisabled: 'vanilla-calendar-grid_disabled', diff --git a/docs/ru/reference/additionally/actions.mdx b/docs/ru/reference/additionally/actions.mdx index 19201cff..59f56207 100644 --- a/docs/ru/reference/additionally/actions.mdx +++ b/docs/ru/reference/additionally/actions.mdx @@ -142,19 +142,19 @@ new VanillaCalendar('#calendar', { `Default: null` -`Options: changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) => void | null` +`Options: changeToInput(e, calendar, dates, time, hours, minutes, keeping) => void | null` ```js new VanillaCalendar('#calendar', { actions: { - changeToInput(e, HTMLInputElement, dates, time, hours, minutes, keeping) {}, + changeToInput(e, calendar, dates, time, hours, minutes, keeping) {}, }, }); ``` Для работы этого метода, необходим параметр `input` со значением `true`. Метод срабатывает после после нажатия на день в календаре или изменения времени любым способом. -Параметры, которые можно получить: `e` - событие, `HTMLInputElement` - HTML-элемент, который является полем ввода, `dates` - массив выбранных дат, `time` - выбранное время, `hours` - выбранный час, `minutes` - выбранные минуты,`keeping` - выбранный маркер AM/PM. +Параметры, которые можно получить: `e` - событие, `calendar` - объект, содержащий `HTMLInputElement`, `HTMLElement` и методы `show()`, `hide()`, `dates` - массив выбранных дат, `time` - выбранное время, `hours` - выбранный час, `minutes` - выбранные минуты,`keeping` - выбранный маркер AM/PM. --- diff --git a/docs/ru/reference/additionally/css-classes.mdx b/docs/ru/reference/additionally/css-classes.mdx index b5b692ca..1667be96 100644 --- a/docs/ru/reference/additionally/css-classes.mdx +++ b/docs/ru/reference/additionally/css-classes.mdx @@ -14,7 +14,6 @@ new VanillaCalendar('#calendar', { calendarYear: 'vanilla-calendar_year', calendarHidden: 'vanilla-calendar_hidden', calendarToInput: 'vanilla-calendar_to-input', - calendarInputWrapper: 'vanilla-calendar-input-wrapper', controls: 'vanilla-calendar-controls', grid: 'vanilla-calendar-grid', gridDisabled: 'vanilla-calendar-grid_disabled', diff --git a/package/src/classes.ts b/package/src/classes.ts index d23648d2..8cc1e731 100644 --- a/package/src/classes.ts +++ b/package/src/classes.ts @@ -6,7 +6,6 @@ const classes = { calendarYear: 'vanilla-calendar_year', calendarHidden: 'vanilla-calendar_hidden', calendarToInput: 'vanilla-calendar_to-input', - calendarInputWrapper: 'vanilla-calendar-input-wrapper', controls: 'vanilla-calendar-controls', grid: 'vanilla-calendar-grid', gridDisabled: 'vanilla-calendar-grid_disabled', diff --git a/package/src/index.d.ts b/package/src/index.d.ts index df4585eb..bfbda8f7 100644 --- a/package/src/index.d.ts +++ b/package/src/index.d.ts @@ -68,7 +68,7 @@ declare class VanillaCalendar { if (self.actions.clickDay) self.actions.clickDay(e, self.selectedDates); - if (self.input && self.HTMLInputElement && self.actions.changeToInput) { - self.actions.changeToInput(e, self.HTMLInputElement, self.selectedDates, self.selectedTime, self.selectedHours, self.selectedMinutes, self.selectedKeeping); + if (self.input && self.HTMLInputElement && self.HTMLElement && self.actions.changeToInput) { + const calendar = { + hide() { + (self.HTMLElement as HTMLElement).classList.add(self.CSSClasses.calendarHidden); + }, + show() { + (self.HTMLElement as HTMLElement).classList.remove(self.CSSClasses.calendarHidden); + }, + HTMLInputElement: self.HTMLInputElement, + HTMLElement: self.HTMLElement as HTMLDivElement, + }; + + self.actions.changeToInput( + e, + calendar, + self.selectedDates, + self.selectedTime, + self.selectedHours, + self.selectedMinutes, + self.selectedKeeping, + ); } if (dayBtnPrevEl) { diff --git a/package/src/scripts/methods/controlTime.ts b/package/src/scripts/methods/controlTime.ts index 500fbf51..b5b704a5 100644 --- a/package/src/scripts/methods/controlTime.ts +++ b/package/src/scripts/methods/controlTime.ts @@ -30,7 +30,26 @@ const controlTime = (self: IVanillaCalendar, keepingTime: number | false) => { } if (self.input && self.HTMLInputElement && self.actions.changeToInput) { - self.actions.changeToInput(e, self.HTMLInputElement, self.selectedDates, self.selectedTime, self.selectedHours, self.selectedMinutes, self.selectedKeeping); + const calendar = { + hide() { + (self.HTMLElement as HTMLElement).classList.add(self.CSSClasses.calendarHidden); + }, + show() { + (self.HTMLElement as HTMLElement).classList.remove(self.CSSClasses.calendarHidden); + }, + HTMLInputElement: self.HTMLInputElement as HTMLInputElement, + HTMLElement: self.HTMLElement as HTMLDivElement, + }; + + self.actions.changeToInput( + e, + calendar, + self.selectedDates, + self.selectedTime, + self.selectedHours, + self.selectedMinutes, + self.selectedKeeping, + ); } }; diff --git a/package/src/scripts/methods/createCalendarToInput.ts b/package/src/scripts/methods/createCalendarToInput.ts index 168eae16..00d915bb 100644 --- a/package/src/scripts/methods/createCalendarToInput.ts +++ b/package/src/scripts/methods/createCalendarToInput.ts @@ -2,17 +2,12 @@ import { IVanillaCalendar } from '../../types'; const createCalendarToInput = (self: IVanillaCalendar) => { if (!self.input || !self.HTMLElement || !self.HTMLElement.parentNode) return; - self.HTMLInputElement = self.HTMLElement as HTMLElement; + self.HTMLInputElement = self.HTMLElement as HTMLInputElement; - const wrapper = document.createElement('div'); const calendar = document.createElement('div'); - wrapper.className = self.CSSClasses.calendarInputWrapper; calendar.className = `${self.CSSClasses.calendar} ${self.CSSClasses.calendarToInput} ${self.CSSClasses.calendarHidden}`; - - self.HTMLElement.parentNode.insertBefore(wrapper, self.HTMLInputElement); - wrapper.append(self.HTMLInputElement); self.HTMLElement = calendar; - wrapper.append(self.HTMLElement); + document.body.append(self.HTMLElement); }; export default createCalendarToInput; diff --git a/package/src/scripts/methods/handlerInput.ts b/package/src/scripts/methods/handlerInput.ts index 4c558035..e33aa021 100644 --- a/package/src/scripts/methods/handlerInput.ts +++ b/package/src/scripts/methods/handlerInput.ts @@ -15,7 +15,11 @@ const handlerInput = (self: IVanillaCalendar) => { if (!self || !self.input) return; currentSelf = self; self.HTMLInputElement?.addEventListener('click', () => { - self.HTMLElement?.classList.remove(self.CSSClasses.calendarHidden); + if (self.HTMLElement && self.HTMLInputElement) { + self.HTMLElement.style.left = `${self.HTMLInputElement.offsetLeft}px`; + self.HTMLElement.style.top = `${self.HTMLInputElement.offsetTop + self.HTMLInputElement.clientHeight}px`; + self.HTMLElement.classList.remove(self.CSSClasses.calendarHidden); + } document.addEventListener('click', documentClickEvent, { capture: true }); }); }; diff --git a/package/src/styles/vanilla-calendar.css b/package/src/styles/vanilla-calendar.css index 74a296ac..55f78682 100644 --- a/package/src/styles/vanilla-calendar.css +++ b/package/src/styles/vanilla-calendar.css @@ -15,11 +15,7 @@ } .vanilla-calendar_to-input { - @apply absolute left-0 top-full mt-1 -} - -.vanilla-calendar-input-wrapper { - @apply relative; + @apply absolute left-0 bottom-0 mt-1 } .vanilla-calendar-controls { diff --git a/package/src/types.ts b/package/src/types.ts index 43778aa0..0ab50d2c 100644 --- a/package/src/types.ts +++ b/package/src/types.ts @@ -75,7 +75,20 @@ export interface IActions { clickYear: ((e: MouseEvent, year: number) => void) | null; clickArrow: ((e: MouseEvent, year: number, month: number) => void) | null; changeTime: ((e: Event, time: string, hours: string, minutes: string, keeping: string) => void) | null; - changeToInput: ((e: Event, HTMLInputElement: HTMLElement, dates?: string[], time?: string, hours?: string, minutes?: string, keeping?: string) => void) | null; + changeToInput: (( + e: Event, + calendar: { + hide(): void; + show(): void; + HTMLInputElement: HTMLInputElement; + HTMLElement: HTMLDivElement; + }, + dates?: string[], + time?: string, + hours?: string, + minutes?: string, + keeping?: string + ) => void) | null; getDays: ((day: number, date: string, HTMLElement: HTMLElement, HTMLButtonElement: HTMLButtonElement) => void) | null; } @@ -101,7 +114,6 @@ export interface ICSSClasses { calendarYear: string; calendarHidden: string; calendarToInput: string; - calendarInputWrapper: string; controls: string; grid: string; gridDisabled: string; @@ -187,7 +199,7 @@ export interface IVariables extends IOptions { } export interface IVanillaCalendar extends IVariables { - HTMLInputElement?: HTMLElement; + HTMLInputElement?: HTMLInputElement; rangeMin?: FormatDateString; rangeMax?: FormatDateString; rangeDisabled?: FormatDateString[];