fix(Field.Date): validate minDate & maxDate by the start of the day (00:00) (#4716)

Author: langz

packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx

@@ -20,6 +20,7 @@ import {
 import { convertStringToDate } from '../../../../components/date-picker/DatePickerCalc'
 import { ProviderProps } from '../../../../shared/Provider'
 import { FormError } from '../../utils'
+import startOfDay from 'date-fns/startOfDay'
 
 // `range`, `showInput`, `showCancelButton` and `showResetButton` are not picked from the `DatePickerProps`
 // Since they require `Field.Date` specific comments, due to them having different default values
@@ -283,11 +284,12 @@ function validateDateLimit({
 
   const [startDateParsed, endDateParsed] = parseRangeValue(value)
 
-  const minDate = convertStringToDate(dates.minDate)
-  const maxDate = convertStringToDate(dates.maxDate)
+  // Set dates to the start of the day to compare the actual days, and not day and time
+  const minDate = startOfDay(convertStringToDate(dates.minDate))
+  const maxDate = startOfDay(convertStringToDate(dates.maxDate))
 
-  const startDate = convertStringToDate(startDateParsed)
-  const endDate = convertStringToDate(endDateParsed)
+  const startDate = startOfDay(convertStringToDate(startDateParsed))
+  const endDate = startOfDay(convertStringToDate(endDateParsed))
 
   const isoDates = {
     minDate:

packages/dnb-eufemia/src/extensions/forms/Field/Date/__tests__/Date.test.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { render, waitFor, screen, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { axeComponent } from '../../../../../core/jest/jestSetup'
-import { DataContext, Field, FieldBlock, Form } from '../../..'
+import { DataContext, Field, FieldBlock, Form, Wizard } from '../../..'
 import nbNO from '../../../constants/locales/nb-NO'
 import enGB from '../../../constants/locales/en-GB'
 import { FormatDateOptions, formatDate } from '../../../Value/Date'
@@ -371,6 +371,102 @@ describe('Field.Date', () => {
     ).toHaveAttribute('aria-disabled', 'true')
   })
 
+  it('should support min and max dates as date objects', async () => {
+    render(
+      <Wizard.Container>
+        <Wizard.Step title="Step 1">
+          <Field.Date
+            value="2025-03-15"
+            minDate={new Date('2025-03-13')}
+            maxDate={new Date('2025-03-31')}
+            showResetButton={false}
+            showCancelButton={false}
+          />
+          <Wizard.Buttons />
+        </Wizard.Step>
+        <Wizard.Step title="Step 2">
+          <Wizard.Buttons />
+        </Wizard.Step>
+      </Wizard.Container>
+    )
+
+    await userEvent.click(screen.getByLabelText('åpne datovelger'))
+
+    // Clicking the minDate should not trigger error
+    await userEvent.click(screen.getByLabelText('torsdag 13. mars 2025'))
+    await userEvent.click(screen.getByText('Neste'))
+    expect(
+      document.querySelector('.dnb-form-status--error')
+    ).not.toBeInTheDocument()
+
+    // Clicking the maxDate should not trigger error
+    await userEvent.click(screen.getByText('Tilbake'))
+    await userEvent.click(screen.getByLabelText('åpne datovelger'))
+    await userEvent.click(screen.getByLabelText('mandag 31. mars 2025'))
+    await userEvent.click(screen.getByText('Neste'))
+    expect(
+      document.querySelector('.dnb-form-status--error')
+    ).not.toBeInTheDocument()
+
+    // Double check that dates before min and max date are disabled in the calendar
+    await userEvent.click(screen.getByText('Tilbake'))
+    await userEvent.click(screen.getByLabelText('åpne datovelger'))
+    expect(screen.getByLabelText('onsdag 12. mars 2025')).toHaveAttribute(
+      'disabled'
+    )
+    expect(screen.getByLabelText('tirsdag 1. april 2025')).toHaveAttribute(
+      'disabled'
+    )
+  })
+
+  it('should support min and max dates as ISO strings', async () => {
+    render(
+      <Wizard.Container>
+        <Wizard.Step title="Step 1">
+          <Field.Date
+            value="2025-03-15"
+            minDate="2025-03-13T11:25:13.000Z"
+            maxDate="2025-03-31T14:12:19.000Z"
+            showResetButton={false}
+            showCancelButton={false}
+          />
+          <Wizard.Buttons />
+        </Wizard.Step>
+        <Wizard.Step title="Step 2">
+          <Wizard.Buttons />
+        </Wizard.Step>
+      </Wizard.Container>
+    )
+
+    await userEvent.click(screen.getByLabelText('åpne datovelger'))
+
+    // Clicking the minDate should not trigger error
+    await userEvent.click(screen.getByLabelText('torsdag 13. mars 2025'))
+    await userEvent.click(screen.getByText('Neste'))
+    expect(
+      document.querySelector('.dnb-form-status--error')
+    ).not.toBeInTheDocument()
+
+    // Clicking the maxDate should not trigger error
+    await userEvent.click(screen.getByText('Tilbake'))
+    await userEvent.click(screen.getByLabelText('åpne datovelger'))
+    await userEvent.click(screen.getByLabelText('mandag 31. mars 2025'))
+    await userEvent.click(screen.getByText('Neste'))
+    expect(
+      document.querySelector('.dnb-form-status--error')
+    ).not.toBeInTheDocument()
+
+    // Double check that dates before min and max date are disabled in the calendar
+    await userEvent.click(screen.getByText('Tilbake'))
+    await userEvent.click(screen.getByLabelText('åpne datovelger'))
+    expect(screen.getByLabelText('onsdag 12. mars 2025')).toHaveAttribute(
+      'disabled'
+    )
+    expect(screen.getByLabelText('tirsdag 1. april 2025')).toHaveAttribute(
+      'disabled'
+    )
+  })
+
   it('should be able to correct invalid dates', async () => {
     render(
       <Field.Date