Skip to content

Commit 98996bd

Browse files
authored
fix(Field.Date): validate minDate & maxDate by the start of the day (00:00) (#4716)
2 parents f1fa1cd + b5a601f commit 98996bd

File tree

2 files changed

+103
-5
lines changed

2 files changed

+103
-5
lines changed

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

+6-4
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
import { convertStringToDate } from '../../../../components/date-picker/DatePickerCalc'
2121
import { ProviderProps } from '../../../../shared/Provider'
2222
import { FormError } from '../../utils'
23+
import startOfDay from 'date-fns/startOfDay'
2324

2425
// `range`, `showInput`, `showCancelButton` and `showResetButton` are not picked from the `DatePickerProps`
2526
// Since they require `Field.Date` specific comments, due to them having different default values
@@ -283,11 +284,12 @@ function validateDateLimit({
283284

284285
const [startDateParsed, endDateParsed] = parseRangeValue(value)
285286

286-
const minDate = convertStringToDate(dates.minDate)
287-
const maxDate = convertStringToDate(dates.maxDate)
287+
// Set dates to the start of the day to compare the actual days, and not day and time
288+
const minDate = startOfDay(convertStringToDate(dates.minDate))
289+
const maxDate = startOfDay(convertStringToDate(dates.maxDate))
288290

289-
const startDate = convertStringToDate(startDateParsed)
290-
const endDate = convertStringToDate(endDateParsed)
291+
const startDate = startOfDay(convertStringToDate(startDateParsed))
292+
const endDate = startOfDay(convertStringToDate(endDateParsed))
291293

292294
const isoDates = {
293295
minDate:

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

+97-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
22
import { render, waitFor, screen, fireEvent } from '@testing-library/react'
33
import userEvent from '@testing-library/user-event'
44
import { axeComponent } from '../../../../../core/jest/jestSetup'
5-
import { DataContext, Field, FieldBlock, Form } from '../../..'
5+
import { DataContext, Field, FieldBlock, Form, Wizard } from '../../..'
66
import nbNO from '../../../constants/locales/nb-NO'
77
import enGB from '../../../constants/locales/en-GB'
88
import { FormatDateOptions, formatDate } from '../../../Value/Date'
@@ -371,6 +371,102 @@ describe('Field.Date', () => {
371371
).toHaveAttribute('aria-disabled', 'true')
372372
})
373373

374+
it('should support min and max dates as date objects', async () => {
375+
render(
376+
<Wizard.Container>
377+
<Wizard.Step title="Step 1">
378+
<Field.Date
379+
value="2025-03-15"
380+
minDate={new Date('2025-03-13')}
381+
maxDate={new Date('2025-03-31')}
382+
showResetButton={false}
383+
showCancelButton={false}
384+
/>
385+
<Wizard.Buttons />
386+
</Wizard.Step>
387+
<Wizard.Step title="Step 2">
388+
<Wizard.Buttons />
389+
</Wizard.Step>
390+
</Wizard.Container>
391+
)
392+
393+
await userEvent.click(screen.getByLabelText('åpne datovelger'))
394+
395+
// Clicking the minDate should not trigger error
396+
await userEvent.click(screen.getByLabelText('torsdag 13. mars 2025'))
397+
await userEvent.click(screen.getByText('Neste'))
398+
expect(
399+
document.querySelector('.dnb-form-status--error')
400+
).not.toBeInTheDocument()
401+
402+
// Clicking the maxDate should not trigger error
403+
await userEvent.click(screen.getByText('Tilbake'))
404+
await userEvent.click(screen.getByLabelText('åpne datovelger'))
405+
await userEvent.click(screen.getByLabelText('mandag 31. mars 2025'))
406+
await userEvent.click(screen.getByText('Neste'))
407+
expect(
408+
document.querySelector('.dnb-form-status--error')
409+
).not.toBeInTheDocument()
410+
411+
// Double check that dates before min and max date are disabled in the calendar
412+
await userEvent.click(screen.getByText('Tilbake'))
413+
await userEvent.click(screen.getByLabelText('åpne datovelger'))
414+
expect(screen.getByLabelText('onsdag 12. mars 2025')).toHaveAttribute(
415+
'disabled'
416+
)
417+
expect(screen.getByLabelText('tirsdag 1. april 2025')).toHaveAttribute(
418+
'disabled'
419+
)
420+
})
421+
422+
it('should support min and max dates as ISO strings', async () => {
423+
render(
424+
<Wizard.Container>
425+
<Wizard.Step title="Step 1">
426+
<Field.Date
427+
value="2025-03-15"
428+
minDate="2025-03-13T11:25:13.000Z"
429+
maxDate="2025-03-31T14:12:19.000Z"
430+
showResetButton={false}
431+
showCancelButton={false}
432+
/>
433+
<Wizard.Buttons />
434+
</Wizard.Step>
435+
<Wizard.Step title="Step 2">
436+
<Wizard.Buttons />
437+
</Wizard.Step>
438+
</Wizard.Container>
439+
)
440+
441+
await userEvent.click(screen.getByLabelText('åpne datovelger'))
442+
443+
// Clicking the minDate should not trigger error
444+
await userEvent.click(screen.getByLabelText('torsdag 13. mars 2025'))
445+
await userEvent.click(screen.getByText('Neste'))
446+
expect(
447+
document.querySelector('.dnb-form-status--error')
448+
).not.toBeInTheDocument()
449+
450+
// Clicking the maxDate should not trigger error
451+
await userEvent.click(screen.getByText('Tilbake'))
452+
await userEvent.click(screen.getByLabelText('åpne datovelger'))
453+
await userEvent.click(screen.getByLabelText('mandag 31. mars 2025'))
454+
await userEvent.click(screen.getByText('Neste'))
455+
expect(
456+
document.querySelector('.dnb-form-status--error')
457+
).not.toBeInTheDocument()
458+
459+
// Double check that dates before min and max date are disabled in the calendar
460+
await userEvent.click(screen.getByText('Tilbake'))
461+
await userEvent.click(screen.getByLabelText('åpne datovelger'))
462+
expect(screen.getByLabelText('onsdag 12. mars 2025')).toHaveAttribute(
463+
'disabled'
464+
)
465+
expect(screen.getByLabelText('tirsdag 1. april 2025')).toHaveAttribute(
466+
'disabled'
467+
)
468+
})
469+
374470
it('should be able to correct invalid dates', async () => {
375471
render(
376472
<Field.Date

0 commit comments

Comments
 (0)