diff --git a/docs/en/learn/additional-features/date-picker-in-input.mdx b/docs/en/learn/additional-features/date-picker-in-input.mdx index 85275133..d211f4c6 100644 --- a/docs/en/learn/additional-features/date-picker-in-input.mdx +++ b/docs/en/learn/additional-features/date-picker-in-input.mdx @@ -7,14 +7,14 @@ Here's a simple example of usage with default parameters: Open the sandbox in a separate tab to see the example with all the files. To do this, click the **«Открыть»"** button in the upper right corner. - + It's important to note that the **«Input»** in the context of this calendar does not necessarily have to be an `` tag. It can be any HTML element, such as a `
`. - + With the calendar type set to `'multiple'`, users can select multiple dates simultaneously. This allows for easily defining date ranges and working with them. Such a calendar provides flexibility and various options for date management. - + diff --git a/docs/ru/learn/additional-features/date-picker-in-input.mdx b/docs/ru/learn/additional-features/date-picker-in-input.mdx index 37158323..67c041b8 100644 --- a/docs/ru/learn/additional-features/date-picker-in-input.mdx +++ b/docs/ru/learn/additional-features/date-picker-in-input.mdx @@ -7,14 +7,14 @@ Откройте песочницу в отдельной вкладке, чтобы увидеть пример с всеми файлами. Для этого нажмите кнопку **«Открыть»** вверху справа. - + Важно отметить, что **«Input»** в контексте этого календаря не обязательно является тегом ``. Это может быть любой HTML-элемент, например `
`. - + С типом календаря `'multiple'`, пользователь может выбирать несколько дат одновременно. Это позволяет легко определять диапазоны дат и работать с ними. Такой календарь предоставляет гибкость и множество вариантов для управления датами. - + diff --git a/examples/additional-features-date-picker-in-input-div.ts b/examples/additional-features-date-picker-in-input-div.ts index a89443aa..bb59591d 100644 --- a/examples/additional-features-date-picker-in-input-div.ts +++ b/examples/additional-features-date-picker-in-input-div.ts @@ -1,23 +1,25 @@ import VanillaCalendar, { Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/build/vanilla-calendar.min.css'; -// start irrelevant code -document.querySelector('#calendar-input-div').style.display = 'flex'; -// end irrelevant code - const options: Options = { input: true, actions: { - changeToInput(e, calendar, dates, time, hours, minutes, keeping) { - if (dates[0]) { - calendar.HTMLInputElement.innerHTML = dates[0]; + changeToInput(e, calendar, self) { + if (!self.HTMLInputElement) return; + if (self.selectedDates[0]) { + self.HTMLInputElement.innerHTML = self.selectedDates[0]; // if you want to hide the calendar after picking a date calendar.hide(); } else { - calendar.HTMLInputElement.innerHTML = ''; + self.HTMLInputElement.innerHTML = ''; } }, }, + settings: { + visibility: { + positionToInput: 'center', + }, + }, }; const calendarInput = new VanillaCalendar('#calendar-input-div', options); diff --git a/examples/additional-features-date-picker-in-input-multiple.ts b/examples/additional-features-date-picker-in-input-multiple.ts index b4b6eb52..1eb575dd 100644 --- a/examples/additional-features-date-picker-in-input-multiple.ts +++ b/examples/additional-features-date-picker-in-input-multiple.ts @@ -1,10 +1,6 @@ import VanillaCalendar, { Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/build/vanilla-calendar.min.css'; -// start irrelevant code -document.querySelector('#calendar-input').style.display = 'flex'; -// end irrelevant code - const options: Options = { input: true, type: 'multiple', @@ -20,14 +16,15 @@ const options: Options = { }, }, actions: { - changeToInput(e, calendar, dates, time, hours, minutes, keeping) { - if (dates[1]) { - dates.sort((a, b) => +new Date(a) - +new Date(b)); - calendar.HTMLInputElement.value = `${dates[0]} — ${dates[dates.length - 1]}`; - } else if (dates[0]) { - calendar.HTMLInputElement.value = dates[0]; + changeToInput(e, calendar, self) { + if (!self.HTMLInputElement) return; + if (self.selectedDates[1]) { + self.selectedDates.sort((a, b) => +new Date(a) - +new Date(b)); + self.HTMLInputElement.value = `${self.selectedDates[0]} — ${self.selectedDates[self.selectedDates.length - 1]}`; + } else if (self.selectedDates[0]) { + self.HTMLInputElement.value = self.selectedDates[0]; } else { - calendar.HTMLInputElement.value = ''; + self.HTMLInputElement.value = ''; } }, }, diff --git a/examples/additional-features-date-picker-in-input.ts b/examples/additional-features-date-picker-in-input.ts index f3599e93..35e7f3a1 100644 --- a/examples/additional-features-date-picker-in-input.ts +++ b/examples/additional-features-date-picker-in-input.ts @@ -1,20 +1,17 @@ import VanillaCalendar, { Options } from 'vanilla-calendar-pro'; import 'vanilla-calendar-pro/build/vanilla-calendar.min.css'; -// start irrelevant code -document.querySelector('#calendar-input').style.display = 'flex'; -// end irrelevant code - const options: Options = { input: true, actions: { - changeToInput(e, calendar, dates, time, hours, minutes, keeping) { - if (dates[0]) { - calendar.HTMLInputElement.value = dates[0]; + changeToInput(e, calendar, self) { + if (!self.HTMLInputElement) return; + if (self.selectedDates[0]) { + self.HTMLInputElement.value = self.selectedDates[0]; // if you want to hide the calendar after picking a date calendar.hide(); } else { - calendar.HTMLInputElement.value = ''; + self.HTMLInputElement.value = ''; } }, },