Merge pull request #169 from uvarov-frontend/fix/single_date-selectio…

…n_in_multiple_range Сorrect the choice of one day in 'multiple-ranged'
uvarov-frontend · Dec 9, 2023 · f2cb9c2 · f2cb9c2
2 parents f0c48db + 4e327d0
commit f2cb9c2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/package/src/scripts/handles/handleDayRangedSelection.ts b/package/src/scripts/handles/handleDayRangedSelection.ts
@@ -2,6 +2,7 @@ import { FormatDateString } from '@package/types';
 import VanillaCalendar from '@src/vanilla-calendar';
 import getDateString from '@scripts/helpers/getDateString';
 import getDate from '@scripts/helpers/getDate';
+import parseDates from '@scripts/helpers/parseDates';
 import create from '@scripts/create';
 
 const current: {
@@ -79,10 +80,11 @@ const handleDayRangedSelection = (self: VanillaCalendar, formattedDate?: FormatD
 	if (formattedDate) {
 		const selectedDateExists = self.selectedDates.length === 1 && self.selectedDates[0].includes(formattedDate);
 		self.selectedDates = selectedDateExists && !self.settings.selection.cancelableDay
-			? [formattedDate]
+			? [formattedDate, formattedDate]
 			: selectedDateExists && self.settings.selection.cancelableDay
 				? []
 				: self.selectedDates.length > 1 ? [formattedDate] : [...self.selectedDates, formattedDate];
+		self.selectedDates?.sort((a, b) => +new Date(a) - +new Date(b));
 	}
 
 	if (self.settings.range.disableGaps) {
@@ -99,15 +101,10 @@ const handleDayRangedSelection = (self: VanillaCalendar, formattedDate?: FormatD
 			if (self.settings.range.disableGaps) updateDisabledDates();
 		},
 		reset: () => {
-			const [startDate, endDate] = (self.selectedDates as FormatDateString[]).map((selectedDate) => getDate(selectedDate));
-			const dateIncrement = endDate > startDate ? 1 : -1;
-			self.selectedDates = [];
-
-			for (let i = new Date(startDate); endDate > startDate ? i <= endDate : i >= endDate; i.setDate(i.getDate() + dateIncrement)) {
-				const date = getDateString(i);
-				if (!self.rangeDisabled?.includes(date)) self.selectedDates = self.selectedDates ? [...self.selectedDates, date] : [date];
-			}
-
+			const [startDate, endDate] = [self.selectedDates[0], self.selectedDates[self.selectedDates.length - 1]];
+			self.selectedDates = self.selectedDates[0] !== self.selectedDates[self.selectedDates.length - 1]
+				? parseDates([`${startDate as string}:${endDate as string}`])
+				: [self.selectedDates[0], self.selectedDates[0]];
 			self.HTMLElement.removeEventListener('mousemove', handleHoverDaysEvent);
 			document.removeEventListener('keydown', handleCancelSelectionDays);
 			if (self.settings.range.disableGaps) resetDisabledDates();

diff --git a/package/src/scripts/methods/createDays.ts b/package/src/scripts/methods/createDays.ts
@@ -59,10 +59,12 @@ const setDayModifier = (
 			if (self.selectedDates[0] === date) {
 				dayEl.classList.add(self.CSSClasses.daySelectedFirst);
 				dayBtnEl.classList.add(self.CSSClasses.daySelectedFirst);
-			} else if (self.selectedDates[self.selectedDates.length - 1] === date) {
+			}
+			if (self.selectedDates[self.selectedDates.length - 1] === date) {
 				dayEl.classList.add(self.CSSClasses.daySelectedLast);
 				dayBtnEl.classList.add(self.CSSClasses.dayBtnSelectedLast);
-			} else {
+			}
+			if (self.selectedDates[0] !== date && self.selectedDates[self.selectedDates.length - 1] !== date) {
 				dayEl.classList.add(self.CSSClasses.daySelectedIntermediate);
 				dayBtnEl.classList.add(self.CSSClasses.dayBtnSelectedIntermediate);
 			}

diff --git a/package/src/styles/vanilla-calendar.layout.css b/package/src/styles/vanilla-calendar.layout.css
@@ -162,6 +162,10 @@
 	@apply rounded-tl-none rounded-bl-none rounded-tr-lg rounded-br-lg
 }
 
+.vanilla-calendar-day_selected-first.vanilla-calendar-day_selected-last .vanilla-calendar-day__btn_selected {
+	@apply rounded-tl-lg rounded-bl-lg rounded-tr-lg rounded-br-lg
+}
+
 .vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn_selected_intermediate {
 	@apply rounded-none
 }