fix docs and examples

uvarov-frontend · Dec 8, 2023 · 79352ca · 79352ca
1 parent 364cb57
commit 79352ca
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 33 deletions.
diff --git 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.
 </Info>
 
-<Sandbox example="additional-features-date-picker-in-input" height={470} />
+<Sandbox example="additional-features-date-picker-in-input" height={470} input={true} />
 
 It's important to note that the **«Input»** in the context of this calendar does not necessarily have to be an `<input>` tag. It can be any HTML element, such as a `<div>`.
 
-<Sandbox example="additional-features-date-picker-in-input-div" height={470} />
+<Sandbox example="additional-features-date-picker-in-input-div" height={470} input={true} />
 
 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.
 
-<Sandbox example="additional-features-date-picker-in-input-multiple" vertically={false} height={760} />
+<Sandbox example="additional-features-date-picker-in-input-multiple" vertically={false} height={760} input={true} />
diff --git 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 @@
   Откройте песочницу в отдельной вкладке, чтобы увидеть пример с всеми файлами. Для этого нажмите кнопку **«Открыть»** вверху справа.
 </Info>
 
-<Sandbox example="additional-features-date-picker-in-input" height={470} />
+<Sandbox example="additional-features-date-picker-in-input" height={470} input="#calendar-input" />
 
 Важно отметить, что **«Input»** в контексте этого календаря не обязательно является тегом `<input>`. Это может быть любой HTML-элемент, например `<div>`.
 
-<Sandbox example="additional-features-date-picker-in-input-div" height={470} />
+<Sandbox example="additional-features-date-picker-in-input-div" height={470} input="#calendar-input-div" />
 
 С типом календаря `'multiple'`, пользователь может выбирать несколько дат одновременно.
 Это позволяет легко определять диапазоны дат и работать с ними.
 Такой календарь предоставляет гибкость и множество вариантов для управления датами.
 
-<Sandbox example="additional-features-date-picker-in-input-multiple" vertically={false} height={760} />
+<Sandbox example="additional-features-date-picker-in-input-multiple" vertically={false} height={760} input="#calendar-input" />
diff --git 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
@@ -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
@@ -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 = '';
       }
     },
   },