Merge pull request #292 from uvarov-frontend/fix/289_-range

[FIX] settings.range.min and settings.range.max do not inherit manually set date.min and date.max
uvarov-frontend · Aug 17, 2024 · 30ea0cd · 30ea0cd
2 parents a170a3b + 45362a7
commit 30ea0cd
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 65 deletions.
diff --git a/docs/en/reference/additionally/settings.mdx b/docs/en/reference/additionally/settings.mdx
@@ -45,22 +45,18 @@ This parameter sets the start of the week in accordance with the international s
 
 ## settings.range.min
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '1970-01-01'`
 
-`Options: 'YYYY-MM-DD' | Number | Date | 'today'`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   settings: {
     range: {
       min: '2022-07-01',
       // or
-      min: 1722152977141, // in milliseconds from 1970-01-01
-      // or
-      min: new Date('2018-01-01'),
-      // or
       min: 'today',
     }
   },
@@ -81,22 +77,18 @@ This parameter sets the minimum date that the user can choose. Dates earlier tha
 
 ## settings.range.max
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '2470-12-31'`
 
-`Options: 'YYYY-MM-DD' | Number | Date | 'today'`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   settings: {
     range: {
       max: '2024-07-01',
       // or
-      max: 1722152977141, // in milliseconds from 1970-01-01
-      // or
-      max: new Date('2018-01-01'),
-      // or
       max: 'today',
     }
   },

diff --git a/docs/en/reference/main/main-settings.mdx b/docs/en/reference/main/main-settings.mdx
@@ -145,20 +145,18 @@ If `toggleSelected` parameter is `true`, or the callback returns `true`, then cl
 
 ## date.min
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '1970-01-01'`
 
-`Options: 'YYYY-MM-DD' | Number | Date`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   date: {
     min: '1970-01-01',
     // or
-    min: 1722152977141, // in milliseconds from 1970-01-01
-    // or
-    min: new Date('2018-01-01'),
+    min: 'today',
   },
 });
 ```
@@ -169,20 +167,18 @@ The `date.min` parameter sets the minimum allowable date that the calendar will
 
 ## date.max
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '2470-12-31'`
 
-`Options: 'YYYY-MM-DD' | Number | Date`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   date: {
     max: '2470-12-31',
     // or
-    max: 1722152977141, // in milliseconds from 1970-01-01
-    // or
-    max: new Date('2018-01-01'),
+    max: 'today',
   },
 });
 ```

diff --git a/docs/ru/reference/additionally/settings.mdx b/docs/ru/reference/additionally/settings.mdx
@@ -45,22 +45,18 @@ new VanillaCalendar('#calendar', {
 
 ## settings.range.min
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '1970-01-01'`
 
-`Options: 'YYYY-MM-DD' | Number | Date | 'today'`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   settings: {
     range: {
       min: '2022-07-01',
       // or
-      min: 1722152977141, // in milliseconds from 1970-01-01
-      // or
-      min: new Date('2018-01-01'),
-      // or
       min: 'today',
     }
   },
@@ -81,22 +77,18 @@ new VanillaCalendar('#calendar', {
 
 ## settings.range.max
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '2470-12-31'`
 
-`Options: 'YYYY-MM-DD' | Number | Date | 'today'`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   settings: {
     range: {
       max: '2024-07-01',
       // or
-      max: 1722152977141, // in milliseconds from 1970-01-01
-      // or
-      max: new Date('2018-01-01'),
-      // or
       max: 'today',
     }
   },

diff --git a/docs/ru/reference/main/main-settings.mdx b/docs/ru/reference/main/main-settings.mdx
@@ -145,20 +145,18 @@ new VanillaCalendar('#calendar', {
 
 ## date.min
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '1970-01-01'`
 
-`Options: 'YYYY-MM-DD'`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   date: {
     min: '1970-01-01',
     // or
-    min: 1722152977141, // in milliseconds from 1970-01-01
-    // or
-    min: new Date('2018-01-01'),
+    min: 'today',
   },
 });
 ```
@@ -169,20 +167,18 @@ new VanillaCalendar('#calendar', {
 
 ## date.max
 
-`Type: String | Number | Date`
+`Type: String`
 
 `Default: '2470-12-31'`
 
-`Options: 'YYYY-MM-DD'`
+`Options: 'YYYY-MM-DD' | 'today'`
 
 ```js
 new VanillaCalendar('#calendar', {
   date: {
     max: '2470-12-31',
     // or
-    max: 1722152977141, // in milliseconds from 1970-01-01
-    // or
-    max: new Date('2018-01-01'),
+    max: 'today',
   },
 });
 ```

diff --git a/package/src/scripts/default.ts b/package/src/scripts/default.ts
@@ -23,8 +23,8 @@ export default class DefaultOptionsCalendar {
 		lang: 'en',
 		iso8601: true,
 		range: {
-			min: this.date.min,
-			max: this.date.max,
+			min: undefined,
+			max: undefined,
 			disablePast: false,
 			disableGaps: false,
 			edgesOnly: false,

diff --git a/package/src/scripts/helpers/setVariables.ts b/package/src/scripts/helpers/setVariables.ts
@@ -4,7 +4,8 @@ import getDateString from '@scripts/helpers/getDateString';
 import getLocalDate from '@scripts/helpers/getLocalDate';
 import transformTime12 from '@scripts/helpers/transformTime12';
 import getDate from '@scripts/helpers/getDate';
-import messages from './getMessages';
+import messages from '@scripts/helpers/getMessages';
+import { FormatDateString } from '@package/types';
 
 const initSelectedMonthYear = (self: VanillaCalendar) => {
 	if (self.jumpToSelectedDate && self.settings.selected.dates?.length && (self.settings.selected.month === undefined && self.settings.selected.year === undefined)) {
@@ -22,14 +23,23 @@ const initSelectedMonthYear = (self: VanillaCalendar) => {
 
 const initRange = (self: VanillaCalendar) => {
 	// set self.rangeMin and self.rangeMax
-	if (self.settings.range.min === 'today') {
-		self.settings.range.min = getLocalDate();
-	}
-	if (self.settings.range.max === 'today') {
-		self.settings.range.max = getLocalDate();
-	}
-	self.settings.range.min = getDate(self.date.min) >= getDate(self.settings.range.min) ? self.date.min : self.settings.range.min;
-	self.settings.range.max = getDate(self.date.max) <= getDate(self.settings.range.max) ? self.date.max : self.settings.range.max;
+	if (self.date.min === 'today') self.date.min = getLocalDate();
+	if (self.date.max === 'today') self.date.max = getLocalDate();
+
+	if (self.settings.range.min === 'today') self.settings.range.min = getLocalDate();
+	if (self.settings.range.max === 'today') self.settings.range.max = getLocalDate();
+
+	self.settings.range.min = self.settings.range.min
+		? getDate(self.date.min) >= getDate(self.settings.range.min)
+			? self.date.min
+			: self.settings.range.min
+		: self.date.min;
+
+	self.settings.range.max = self.settings.range.max
+		? getDate(self.date.max) <= getDate(self.settings.range.max)
+			? self.date.max
+			: self.settings.range.max
+		: self.date.max;
 
 	const isDisablePast = self.settings.range.disablePast && !self.settings.range.disableAllDays && getDate(self.settings.range.min) < self.date.today;
 	self.rangeMin = isDisablePast
@@ -66,8 +76,8 @@ const initSelectedDates = (self: VanillaCalendar) => {
 };
 
 const initDateMinMax = (self: VanillaCalendar) => {
-	self.dateMin = self.settings.visibility.disabled ? getDate(self.date.min) : getDate(self.rangeMin);
-	self.dateMax = self.settings.visibility.disabled ? getDate(self.date.max) : getDate(self.rangeMax);
+	self.dateMin = self.settings.visibility.disabled ? getDate(self.date.min as FormatDateString) : getDate(self.rangeMin);
+	self.dateMax = self.settings.visibility.disabled ? getDate(self.date.max as FormatDateString) : getDate(self.rangeMax);
 };
 
 const initTime = (self: VanillaCalendar) => {

diff --git a/package/types.ts b/package/types.ts
@@ -19,16 +19,16 @@ export type TypesCalendar = 'default' | 'multiple' | 'month' | 'year';
 export type CSSClasses = typeof classes;
 
 export interface IDates {
-	min: FormatDateString;
-	max: FormatDateString;
+	min: FormatDateString | 'today';
+	max: FormatDateString | 'today';
 	today: Date;
 }
 
 export interface IRange {
 	/** This parameter sets the minimum date that the user can choose */
-	min: FormatDateString | 'today';
+	min?: FormatDateString | 'today';
 	/** This parameter sets the maximum date that the user can choose */
-	max: FormatDateString | 'today';
+	max?: FormatDateString | 'today';
 	/** This parameter disables all past days. */
 	disablePast: boolean;
 	/**
@@ -46,9 +46,9 @@ export interface IRange {
 	/** 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[];
+	disabled?: Array<Date | number | FormatDateString>;
 	/** This parameter allows you to enable specific dates regardless of the range and disabled dates. */
-	enabled?: string[];
+	enabled?: Array<Date | number | FormatDateString>;
 }
 
 export interface ISelection {
@@ -63,10 +63,10 @@ export interface ISelection {
 }
 
 export interface ISelected {
-	dates?: Array<Date | number | string>;
+	dates?: Array<Date | number | FormatDateString>;
 	month?: number;
 	year?: number;
-	holidays?: string[];
+	holidays?: Array<Date | number | FormatDateString>;
 	time?: string;
 }