diff --git a/packages/aap-felles-css/CHANGELOG.md b/packages/aap-felles-css/CHANGELOG.md index b3da750..2506b77 100644 --- a/packages/aap-felles-css/CHANGELOG.md +++ b/packages/aap-felles-css/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.0.6 + +### Patch Changes + +- Legger inn støtte for datoer på format ddmmyy + ## 2.0.5 ### Patch Changes diff --git a/packages/aap-felles-css/package.json b/packages/aap-felles-css/package.json index 8bac693..fbe3382 100644 --- a/packages/aap-felles-css/package.json +++ b/packages/aap-felles-css/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.5", + "version": "2.0.6", "name": "@navikt/aap-felles-css", "author": "NAV", "homepage": "https://github.com/navikt/aap-felles-frontend#readme", diff --git a/packages/aap-felles-prettier/CHANGELOG.md b/packages/aap-felles-prettier/CHANGELOG.md index 0be7099..10854c5 100644 --- a/packages/aap-felles-prettier/CHANGELOG.md +++ b/packages/aap-felles-prettier/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.0.6 + +### Patch Changes + +- Legger inn støtte for datoer på format ddmmyy + ## 2.0.5 ### Patch Changes diff --git a/packages/aap-felles-prettier/package.json b/packages/aap-felles-prettier/package.json index dc86a9e..cae2b4c 100644 --- a/packages/aap-felles-prettier/package.json +++ b/packages/aap-felles-prettier/package.json @@ -1,7 +1,7 @@ { "name": "@navikt/aap-felles-prettier", "author": "NAV", - "version": "2.0.5", + "version": "2.0.6", "main": "index.json", "license": "MIT", "dependencies": { diff --git a/packages/aap-felles-react/CHANGELOG.md b/packages/aap-felles-react/CHANGELOG.md index b2316d5..29784a2 100644 --- a/packages/aap-felles-react/CHANGELOG.md +++ b/packages/aap-felles-react/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.0.6 + +### Patch Changes + +- Legger inn støtte for datoer på format ddmmyy + ## 2.0.5 ### Patch Changes diff --git a/packages/aap-felles-react/package.json b/packages/aap-felles-react/package.json index 65fdeff..6e31351 100644 --- a/packages/aap-felles-react/package.json +++ b/packages/aap-felles-react/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.5", + "version": "2.0.6", "name": "@navikt/aap-felles-react", "author": "NAV", "homepage": "https://github.com/navikt/aap-felles-frontend#readme", diff --git a/packages/aap-felles-react/src/Form/FormField.tsx b/packages/aap-felles-react/src/Form/FormField.tsx index e023329..dbbf192 100644 --- a/packages/aap-felles-react/src/Form/FormField.tsx +++ b/packages/aap-felles-react/src/Form/FormField.tsx @@ -97,6 +97,7 @@ export const FormField = (props: Props )} {formField.type === 'checkbox' && ( diff --git a/packages/aap-felles-react/src/Form/FormHook.tsx b/packages/aap-felles-react/src/Form/FormHook.tsx index c2902e3..709246c 100644 --- a/packages/aap-felles-react/src/Form/FormHook.tsx +++ b/packages/aap-felles-react/src/Form/FormHook.tsx @@ -49,7 +49,8 @@ interface FormFieldDate extends BaseFormField< interface FormFieldDateInput extends BaseFormField { type: 'date_input'; - defaultValue?: string; + defaultValue?: string; + allowShortDates?: boolean; } interface FormFieldWithOptions extends BaseFormField { diff --git a/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.test.tsx b/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.test.tsx index 8110c68..3eb25a1 100644 --- a/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.test.tsx +++ b/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.test.tsx @@ -44,6 +44,22 @@ describe('DateInputWrapper', () => { await user.click(screen.getByRole('button', { name: 'Send' })); expect(screen.queryByText('Ugyldig datoformat')).not.toBeInTheDocument(); }); + + test('håndterer ikke korte datoer uten at det er enablet', async () => { + render(); + const input = screen.getByRole('textbox', { name: 'Dato' }); + await user.type(input, '120280'); + screen.getByRole('button', { name: 'Send' }).focus(); + expect(input).toHaveValue('120280'); + }); + + test('kan håndtere korte datoer når det er enablet', async () => { + render(); + const input = screen.getByRole('textbox', { name: 'Dato' }); + await user.type(input, '120280'); + screen.getByRole('button', { name: 'Send' }).focus(); + expect(input).toHaveValue('12.02.1980'); + }); }); type FormFields = { @@ -52,6 +68,7 @@ type FormFields = { type Props = { defaultValue?: string; + allowShortDates?: boolean; }; const TestForm = (props: Props) => { @@ -62,6 +79,7 @@ const TestForm = (props: Props) => { description: 'Datoformat: dd.mm.åååå', defaultValue: props.defaultValue, rules: { maxLength: { value: 10, message: 'Ugyldig datoformat' } }, + allowShortDates: props.allowShortDates, }, }); return ( diff --git a/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.tsx b/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.tsx index d917ca9..69a676f 100644 --- a/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.tsx +++ b/packages/aap-felles-react/src/Form/dateinputwrapper/DateInputWrapper.tsx @@ -2,6 +2,7 @@ import { TextField } from '@navikt/ds-react'; import React from 'react'; import { ReactNode } from 'react'; import { Control, Controller, FieldPath, FieldValues, RegisterOptions } from 'react-hook-form'; +import { mapShortDateToDateString } from './dateMapper'; export type DateInputWrapperProps = { name: FieldPath; @@ -11,6 +12,7 @@ export type DateInputWrapperProps = { rules?: RegisterOptions; readOnly?: boolean; className?: string; + allowShortDates?: boolean; }; export const DateInputWrapper = ({ @@ -21,8 +23,15 @@ export const DateInputWrapper = ({ rules, readOnly, className, + allowShortDates = false, }: DateInputWrapperProps) => { const classNames = `aap_date_input ${className}`; + const transform = (input: React.FormEvent) => { + if (allowShortDates) { + return mapShortDateToDateString(input.currentTarget.value); + } + return input; + }; return ( ({ type={'text'} error={error?.message} value={value || ''} - onChange={onChange} + onChange={(value) => onChange(transform(value))} description={description} readOnly={readOnly} className={classNames} diff --git a/packages/aap-felles-react/src/Form/dateinputwrapper/dateMapper.test.ts b/packages/aap-felles-react/src/Form/dateinputwrapper/dateMapper.test.ts new file mode 100644 index 0000000..b618720 --- /dev/null +++ b/packages/aap-felles-react/src/Form/dateinputwrapper/dateMapper.test.ts @@ -0,0 +1,43 @@ +import { mapShortDateToDateString } from './dateMapper'; + +describe('dateMapper', () => { + test('returnerer input dersom verdien inneholder noe annet enn tall', () => { + const input = 'Hei, dette var da ikke en dato'; + expect(mapShortDateToDateString(input)).toEqual(input); + }); + + test('returnerer input dersom det er en dato på format dd.mm.åååå', () => { + const input = '19.12.2023'; + expect(mapShortDateToDateString(input)).toEqual(input); + }); + + test('returnerer 19.07.2022 når input er 190722', () => { + expect(mapShortDateToDateString('190722')).toEqual('19.07.2022'); + }); + + test('returnerer 19.07.1987 når input er 190787', () => { + expect(mapShortDateToDateString('190787')).toEqual('19.07.1987'); + }); + + test('returnerer 31.12.1999 når input er 311299', () => { + expect(mapShortDateToDateString('311299')).toEqual('31.12.1999'); + }); + + test('returnerer 01.01.2000 når input er 010100', () => { + expect(mapShortDateToDateString('010100')).toEqual('01.01.2000'); + }); + + test('returnerer 31.03.2006 når input er 310306', () => { + expect(mapShortDateToDateString('310306')).toEqual('31.03.2006'); + }); + + test('returnerer en dato fra år 20xx når årstallet er for 90 år siden eller mer', () => { + const nittiÅrSiden = new Date().getFullYear() - 90 - 1900; + expect(mapShortDateToDateString(`3103${nittiÅrSiden}`)).toEqual(`31.03.20${nittiÅrSiden}`); + }); + + test('returnerer en dato fra 19xx når årstallet er under 90 år siden', () => { + const åttiniÅrSiden = new Date().getFullYear() - 89 - 1900; + expect(mapShortDateToDateString(`3103${åttiniÅrSiden}`)).toEqual(`31.03.19${åttiniÅrSiden}`); + }); +}); diff --git a/packages/aap-felles-react/src/Form/dateinputwrapper/dateMapper.ts b/packages/aap-felles-react/src/Form/dateinputwrapper/dateMapper.ts new file mode 100644 index 0000000..e25a48a --- /dev/null +++ b/packages/aap-felles-react/src/Form/dateinputwrapper/dateMapper.ts @@ -0,0 +1,21 @@ +/** + * konverterer en dato på formatet ddmmyy til dd.mm.yyyy + * årstall inntill 90 år tilbake i tid antar vi skal starte med 19 + * Gir input tilbake dersom det ikke er kun tall eller noe annet enn 6 tegn + */ +export const mapShortDateToDateString = (input: string): string => { + const inputIsNumeric = /^\d+$/.test(input); + if (!inputIsNumeric || input.length !== 6) { + return input; + } + + const date = input.substring(0, 2); + const month = input.substring(2, 4); + + const year = Number.parseInt(input.substring(4), 10); + const flipYear = new Date().getFullYear() - 90; + const shortFlipYear = flipYear % 100; + const fullYear = year > shortFlipYear ? 1900 + year : 2000 + year; + + return `${date}.${month}.${fullYear}`; +}; diff --git a/packages/aap-felles-utils-client/CHANGELOG.md b/packages/aap-felles-utils-client/CHANGELOG.md index baf5c22..a2428b0 100644 --- a/packages/aap-felles-utils-client/CHANGELOG.md +++ b/packages/aap-felles-utils-client/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.0.6 + +### Patch Changes + +- Legger inn støtte for datoer på format ddmmyy + ## 2.0.5 ### Patch Changes diff --git a/packages/aap-felles-utils-client/package.json b/packages/aap-felles-utils-client/package.json index 230a379..23a9de0 100644 --- a/packages/aap-felles-utils-client/package.json +++ b/packages/aap-felles-utils-client/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.5", + "version": "2.0.6", "name": "@navikt/aap-felles-utils-client", "author": "NAV", "homepage": "https://github.com/navikt/aap-felles-frontend#readme", diff --git a/packages/aap-felles-utils/CHANGELOG.md b/packages/aap-felles-utils/CHANGELOG.md index bdaf2c0..1000a5d 100644 --- a/packages/aap-felles-utils/CHANGELOG.md +++ b/packages/aap-felles-utils/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.0.6 + +### Patch Changes + +- Legger inn støtte for datoer på format ddmmyy + ## 2.0.5 ### Patch Changes diff --git a/packages/aap-felles-utils/package.json b/packages/aap-felles-utils/package.json index b32aba3..a2b5d59 100644 --- a/packages/aap-felles-utils/package.json +++ b/packages/aap-felles-utils/package.json @@ -1,5 +1,5 @@ { - "version": "2.0.5", + "version": "2.0.6", "name": "@navikt/aap-felles-utils", "author": "NAV", "homepage": "https://github.com/navikt/aap-felles-frontend#readme", diff --git a/packages/eslint-config-aap/CHANGELOG.md b/packages/eslint-config-aap/CHANGELOG.md index 13956c1..b140c87 100644 --- a/packages/eslint-config-aap/CHANGELOG.md +++ b/packages/eslint-config-aap/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 2.0.6 + +### Patch Changes + +- Legger inn støtte for datoer på format ddmmyy + ## 2.0.5 ### Patch Changes diff --git a/packages/eslint-config-aap/package.json b/packages/eslint-config-aap/package.json index d77c23e..31017e8 100644 --- a/packages/eslint-config-aap/package.json +++ b/packages/eslint-config-aap/package.json @@ -1,7 +1,7 @@ { "name": "@navikt/eslint-config-aap", "author": "NAV", - "version": "2.0.5", + "version": "2.0.6", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\"",