Merge pull request #275 from ghiscoding/feat/edges-only

feat: add new `edgesOnly` to return only start/end dates in selection range

Author: uvarov-frontend

docs/en/reference/additionally/settings.mdx

@@ -97,7 +97,7 @@ new VanillaCalendar('#calendar', {
       // or
       max: new Date('2018-01-01'),
       // or
-      ma: 'today',
+      max: 'today',
     }
   },
 });
@@ -115,6 +115,32 @@ This parameter sets the maximum date that the user can choose. Dates later than
 
 ---
 
+## settings.range.edgesOnly
+
+`Type: Boolean`
+
+`Default: false`
+
+`Options: true | false`
+
+```js
+new VanillaCalendar('#calendar', {
+  settings: {
+    range: {
+      edgesOnly: true,
+    }
+  },
+});
+```
+
+This parameter will keep references of the date range edges only, which are the Start and End dates in `settings.selected.dates` but nothing in between the range. It only works when <a href="/docs/reference/additionally/settings#selection-day">`settings.selection.day`</a> is set to `'multiple-ranged'`.
+
+<Info>
+  It's important to note that with this setting, disabling dates within the date range will have no effect. So make sure to use this parameter when you are interested with only the start and end date but nothing in-between.
+</Info>
+
+---
+
 ## settings.range.disablePast
 
 `Type: Boolean`

docs/ru/reference/additionally/settings.mdx

@@ -115,6 +115,32 @@ new VanillaCalendar('#calendar', {
 
 ---
 
+## settings.range.edgesOnly
+
+`Type: Boolean`
+
+`Default: false`
+
+`Options: true | false`
+
+```js
+new VanillaCalendar('#calendar', {
+  settings: {
+    range: {
+      edgesOnly: true,
+    }
+  },
+});
+```
+
+Этот параметр позволяет получить только начальную и конечную выбранную пользователем дату, игнорируя промежуточные даты. Этот параметр работает только в том случае, если для <a href="/docs/reference/additionally/settings#selection-day">`settings.selection.day`</a> установлено значение `'multiple-ranged'`.
+
+<Info>
+  Важно отметить, что при использовании этой настройки отключение дат в пределах диапазона дат не будет иметь никакого эффекта. Поэтому обязательно используйте этот параметр, если вас интересуют только начальная и конечная выбранная пользователем дата.
+</Info>
+
+---
+
 ## settings.range.disablePast
 
 `Type: Boolean`

package/src/scripts/default.ts

@@ -26,6 +26,7 @@ export default class DefaultOptionsCalendar {
 			max: this.date.max,
 			disablePast: false,
 			disableGaps: false,
+			edgesOnly: false,
 			disableAllDays: false,
 			disableWeekday: undefined,
 			disabled: undefined,

package/src/scripts/handles/handleDayRangedSelection.ts

@@ -128,7 +128,9 @@ const handleDayRangedSelection = (self: VanillaCalendar, formattedDate?: FormatD
 		reset: () => {
 			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.settings.range.edgesOnly
+					? [startDate, endDate]
+					: parseDates([`${startDate as string}:${endDate as string}`])
 				: [self.selectedDates[0], self.selectedDates[0]];
 			self.HTMLElement.removeEventListener('mousemove', handleHoverDaysEvent);
 			document.removeEventListener('keydown', handleCancelSelectionDays);

package/src/scripts/methods/createDays.ts

@@ -65,6 +65,18 @@ const setDayModifier = (
 			}
 		}
 	}
+
+	// when using multiple-ranged with range edges only (only includes start/end selected dates)
+	if (self.settings.range.edgesOnly && self.selectedDates.length > 1 && self.settings.selection.day === 'multiple-ranged') {
+		const firstDate = +new Date(self.selectedDates[0]);
+		const lastDate = +new Date(self.selectedDates[self.selectedDates.length - 1]);
+		const nextDate = +new Date(date);
+
+		if (nextDate > firstDate && nextDate < lastDate) {
+			dayBtnEl.classList.add(self.CSSClasses.dayBtnSelected);
+			dayEl.classList.add(self.CSSClasses.daySelectedIntermediate);
+		}
+	}
 };
 
 const createDay = (

package/types.ts

@@ -16,13 +16,29 @@ export interface IDates {
 }
 
 export interface IRange {
+	/** This parameter sets the minimum date that the user can choose */
 	min: FormatDateString | 'today';
+	/** This parameter sets the maximum date that the user can choose */
 	max: FormatDateString | 'today';
+	/** This parameter disables all past days. */
 	disablePast: boolean;
+	/**
+	 * This parameter disables the selection of days within a range with disabled dates.
+	 * Only works when `settings.selection.day` is set to `'multiple-ranged'`.
+	 */
 	disableGaps: boolean;
+	/**
+	 * This parameter will only keep references of the date range edges (start/end dates) in the `settings.selected.dates` array.
+	 * Only works when `settings.selection.day` is set to `'multiple-ranged'`.
+	 */
+	edgesOnly?: boolean;
+	/** This parameter disables all days and can be useful when using `settings.range.enabled` */
 	disableAllDays: boolean;
+	/** This parameter allows you to disable specified weekdays. */
 	disableWeekday?: number[];
+	/** This parameter allows you to disable specific dates regardless of the specified range. */
 	disabled?: string[];
+	/** This parameter allows you to enable specific dates regardless of the range and disabled dates. */
 	enabled?: string[];
 }