fix(validators): test two edge cases for disabled dates + isValid method fix and refactor

Author: ddaribo

src/components/date-range-picker/date-range-picker.spec.ts

@@ -2073,6 +2073,24 @@ describe('Date range picker', () => {
       expect(spec.element.invalid).to.be.true;
       spec.assertSubmitFails();
       await checkInputsInvalidState(spec.element, true, true);
+
+      // single selected date outside the disabled range
+      spec.setProperties({
+        disabledDates,
+        value: { start: new Date(2025, 0, 20), end: new Date(2025, 0, 20) },
+      });
+      expect(spec.element.invalid).to.be.false;
+      spec.assertSubmitPasses();
+      await checkInputsInvalidState(spec.element, false, false);
+
+      // single selected date in the disabled range
+      spec.setProperties({
+        disabledDates,
+        value: { start: new Date(2025, 1, 20), end: new Date(2025, 1, 20) },
+      });
+      expect(spec.element.invalid).to.be.true;
+      spec.assertSubmitFails();
+      await checkInputsInvalidState(spec.element, true, true);
     });
 
     it('should enforce custom constraint', async () => {

src/components/date-range-picker/date-range-picker.ts

@@ -62,7 +62,7 @@ import IgcInputComponent from '../input/input.js';
 import IgcPopoverComponent from '../popover/popover.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './date-range-picker.base.css.js';
-import { dateRangePickerValidators } from './validators.js';
+import { dateRangeValidators } from './validators.js';
 
 export interface DateRangeValue {
   start: Date | null;
@@ -197,7 +197,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   protected inputId = `date-range-picker-${IgcDateRangePickerComponent.increment()}`;
 
   protected override get __validators() {
-    return dateRangePickerValidators;
+    return dateRangeValidators;
   }
 
   /* blazorSuppress */

src/components/date-range-picker/validators.ts

@@ -68,24 +68,33 @@ export const badInputDateRangeValidator: Validator<{
   key: 'badInput',
   message: ({ value }) => formatString(messages.disabledDate, value),
   isValid: ({ value, disabledDates }) => {
-    if (value?.start && value?.end && disabledDates) {
-      const range = Array.from(
-        calendarRange({ start: value.start, end: value.end })
-      );
-      range.push(last(range).add('day', 1));
-      const rangeIncludingDisabled = range.some((day) =>
-        isDateInRanges(day, disabledDates)
-      );
-      return !rangeIncludingDisabled;
+    if (!value?.start || !value?.end || !disabledDates) {
+      return true;
+    }
+
+    let range = [];
+    if (value.start.getTime() === value.end.getTime()) {
+      range = [value.start];
+    } else {
+      range = Array.from(calendarRange({ start: value.start, end: value.end }));
+      const lastDay = last(range);
+      if (lastDay) {
+        range.push(lastDay.add('day', 1));
+      }
+    }
+
+    for (let i = 0; i < range.length; i++) {
+      if (isDateInRanges(range[i], disabledDates)) {
+        return false;
+      }
     }
     return true;
   },
 };
 
-export const dateRangePickerValidators: Validator<IgcDateRangePickerComponent>[] =
-  [
-    requiredDateRangeValidator,
-    minDateRangeValidator,
-    maxDateRangeValidator,
-    badInputDateRangeValidator,
-  ];
+export const dateRangeValidators: Validator<IgcDateRangePickerComponent>[] = [
+  requiredDateRangeValidator,
+  minDateRangeValidator,
+  maxDateRangeValidator,
+  badInputDateRangeValidator,
+];