fix(date-picker): Validators

Author: rkaraivanov

src/components/common/mixins/forms/form-value.ts

@@ -1,3 +1,4 @@
+import { convertToDate, getDateFormValue } from '../../../calendar/helpers.js';
 import { asNumber } from '../../util.js';
 import type { FormValueType, IgcFormControl } from './types.js';
 
@@ -38,6 +39,14 @@ export const defaultNumberTransformers: FormValueTransformers<number> = {
   setFormValue: (value) => value.toString(),
 };
 
+export const defaultDateTimeTransformers: Partial<
+  FormValueTransformers<Date | null>
+> = {
+  setValue: convertToDate,
+  setDefaultValue: convertToDate,
+  setFormValue: getDateFormValue,
+};
+
 export class FormValue<T> {
   private _host: IgcFormControl;
   private _value: T;

src/components/common/validators.ts

@@ -118,8 +118,8 @@ export const minDateValidator: Validator<{
   key: 'rangeUnderflow',
   message: ({ min }) => formatString(validatorMessages.min, min),
   isValid: ({ value, min }) =>
-    min
-      ? !DateTimeUtil.lessThanMinValue(value ?? new Date(), min, false, true)
+    value && min
+      ? !DateTimeUtil.lessThanMinValue(value, min, false, true)
       : true,
 };
 
@@ -130,7 +130,7 @@ export const maxDateValidator: Validator<{
   key: 'rangeOverflow',
   message: ({ max }) => formatString(validatorMessages.max, max),
   isValid: ({ value, max }) =>
-    max
-      ? !DateTimeUtil.greaterThanMaxValue(value ?? new Date(), max, false, true)
+    value && max
+      ? !DateTimeUtil.greaterThanMaxValue(value, max, false, true)
       : true,
 };

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

@@ -950,42 +950,57 @@ describe('Date picker', () => {
     });
 
     it('should enforce min value constraint', () => {
+      // No value - submit passes
       spec.setProperties({ min: new Date(2026, 0, 1) });
-      spec.assertSubmitFails();
+      spec.assertSubmitPasses();
 
+      // Invalid min constraint
       spec.setProperties({ value: new Date(2022, 0, 1) });
       spec.assertSubmitFails();
 
+      // Valid value
       spec.setProperties({ value: new Date(2026, 0, 2) });
       spec.assertSubmitPasses();
     });
 
     it('should enforce max value constraint', () => {
-      spec.setProperties({ max: new Date(2020, 0, 1), value: today.native });
+      // No value - submit passes
+      spec.setProperties({ max: new Date(2020, 0, 1) });
+      spec.assertSubmitPasses();
+
+      // Invalid max constraint
+      spec.setProperties({ value: today.native });
       spec.assertSubmitFails();
 
+      // Valid value
       spec.setProperties({ value: new Date(2020, 0, 1) });
       spec.assertSubmitPasses();
     });
 
     it('should enforce min value constraint with string property', () => {
+      // No value - submit passes
       spec.setProperties({ min: new Date(2026, 0, 1).toISOString() });
-      spec.assertSubmitFails();
+      spec.assertSubmitPasses();
 
+      // Invalid min constraint
       spec.setProperties({ value: new Date(2022, 0, 1).toISOString() });
       spec.assertSubmitFails();
 
+      // Valid value
       spec.setProperties({ value: new Date(2026, 0, 2).toISOString() });
       spec.assertSubmitPasses();
     });
 
     it('should enforce max value constraint with string property', () => {
-      spec.setProperties({
-        max: new Date(2020, 0, 1).toISOString(),
-        value: today.native,
-      });
+      // No value - submit passes
+      spec.setProperties({ max: new Date(2020, 0, 1).toISOString() });
+      spec.assertSubmitPasses();
+
+      // Invalid max constraint
+      spec.setProperties({ value: today.native });
       spec.assertSubmitFails();
 
+      // Valid value
       spec.setProperties({ value: new Date(2020, 0, 1).toISOString() });
       spec.assertSubmitPasses();
     });
@@ -1066,7 +1081,6 @@ describe('Date picker', () => {
       const spec = createFormAssociatedTestBed<IgcDatePickerComponent>(html`
         <igc-date-picker
           name="datePicker"
-          required
           .defaultValue=${null}
         ></igc-date-picker>
       `);
@@ -1076,12 +1090,13 @@ describe('Date picker', () => {
       });
 
       it('fails required validation', () => {
+        spec.setProperties({ required: true });
         spec.assertIsPristine();
         spec.assertSubmitFails();
       });
 
       it('passes required validation when updating defaultValue', () => {
-        spec.setProperties({ defaultValue: today.native });
+        spec.setProperties({ required: true, defaultValue: today.native });
         spec.assertIsPristine();
 
         spec.assertSubmitPasses();
@@ -1107,7 +1122,7 @@ describe('Date picker', () => {
       it('fails max validation', () => {
         spec.setProperties({
           max: today.native,
-          defaultValue: today.native,
+          defaultValue: today.add('day', 1).native,
         });
 
         spec.assertIsPristine();
@@ -1117,7 +1132,7 @@ describe('Date picker', () => {
       it('passes max validation', () => {
         spec.setProperties({
           max: today.native,
-          defaultValue: today.add('day', -1).native,
+          defaultValue: today.native,
         });
 
         spec.assertIsPristine();
@@ -1135,7 +1150,10 @@ describe('Date picker', () => {
           },
         ];
 
-        spec.setProperties({ disabledDates });
+        spec.setProperties({
+          disabledDates,
+          defaultValue: new Date(2024, 1, 28),
+        });
 
         spec.assertIsPristine();
         spec.assertSubmitFails();
@@ -1154,7 +1172,7 @@ describe('Date picker', () => {
 
         spec.setProperties({
           disabledDates,
-          defaultValue: new Date(2024, 1, 26),
+          defaultValue: new Date(2024, 1, 29),
         });
 
         spec.assertIsPristine();
@@ -1187,7 +1205,7 @@ describe('Date picker', () => {
   });
 
   describe('Validation message slots', () => {
-    it('', async () => {
+    it('', () => {
       const now = CalendarDay.today;
       const tomorrow = now.add('day', 1);
       const yesterday = now.add('day', -1);

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

@@ -5,7 +5,7 @@ import { live } from 'lit/directives/live.js';
 
 import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
-import { convertToDate, getDateFormValue } from '../calendar/helpers.js';
+import { convertToDate } from '../calendar/helpers.js';
 import {
   type DateRangeDescriptor,
   DateRangeType,
@@ -32,6 +32,7 @@ import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-r
 import {
   type FormValue,
   createFormValueState,
+  defaultDateTimeTransformers,
 } from '../common/mixins/forms/form-value.js';
 import { createCounter, findElementFromEventPath } from '../common/util.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
@@ -434,11 +435,7 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
 
     this._formValue = createFormValueState<Date | null>(this, {
       initialValue: null,
-      transformers: {
-        setValue: convertToDate,
-        setDefaultValue: convertToDate,
-        setFormValue: getDateFormValue,
-      },
+      transformers: defaultDateTimeTransformers,
     });
 
     this.addEventListener('focusin', this.handleFocusIn);

src/components/date-picker/validators.ts

@@ -15,8 +15,8 @@ export const datePickerValidators: Validator<IgcDatePickerComponent>[] = [
   maxDateValidator,
   {
     key: 'badInput',
-    message: (host) => formatString(messages.disabledDate, host.value),
-    isValid: (host) =>
-      host.value ? !isDateInRanges(host.value, host.disabledDates ?? []) : true,
+    message: ({ value }) => formatString(messages.disabledDate, value),
+    isValid: ({ value, disabledDates }) =>
+      value && disabledDates ? !isDateInRanges(value, disabledDates) : true,
   },
 ];