Legger inn støtte for datoer på format ddmmyy i DateInputWrapper

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

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",

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

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": {

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

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",

packages/aap-felles-react/src/Form/FormField.tsx

@@ -97,6 +97,7 @@ export const FormField = <FormFieldIds extends FieldValues>(props: Props<FormFie
           description={formField.description}
           readOnly={formField.readOnly}
           className={className}
+          allowShortDates={formField.allowShortDates}
         />
       )}
       {formField.type === 'checkbox' && (

packages/aap-felles-react/src/Form/FormHook.tsx

@@ -49,7 +49,8 @@ interface FormFieldDate<FormFieldIds extends FieldValues> extends BaseFormField<
 
 interface FormFieldDateInput<FormFieldIds extends FieldValues> extends BaseFormField<FormFieldIds> {
   type: 'date_input';
-  defaultValue?: string; 
+  defaultValue?: string;
+  allowShortDates?: boolean;
 }
 
 interface FormFieldWithOptions<FormFieldIds extends FieldValues> extends BaseFormField<FormFieldIds> {

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(<TestForm />);
+    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(<TestForm allowShortDates />);
+    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 (

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<FormFieldValues extends FieldValues> = {
   name: FieldPath<FormFieldValues>;
@@ -11,6 +12,7 @@ export type DateInputWrapperProps<FormFieldValues extends FieldValues> = {
   rules?: RegisterOptions<FormFieldValues>;
   readOnly?: boolean;
   className?: string;
+  allowShortDates?: boolean;
 };
 
 export const DateInputWrapper = <FormFieldValues extends FieldValues>({
@@ -21,8 +23,15 @@ export const DateInputWrapper = <FormFieldValues extends FieldValues>({
   rules,
   readOnly,
   className,
+  allowShortDates = false,
 }: DateInputWrapperProps<FormFieldValues>) => {
   const classNames = `aap_date_input ${className}`;
+  const transform = (input: React.FormEvent<HTMLInputElement>) => {
+    if (allowShortDates) {
+      return mapShortDateToDateString(input.currentTarget.value);
+    }
+    return input;
+  };
   return (
     <Controller
       name={name}
@@ -37,7 +46,7 @@ export const DateInputWrapper = <FormFieldValues extends FieldValues>({
           type={'text'}
           error={error?.message}
           value={value || ''}
-          onChange={onChange}
+          onChange={(value) => onChange(transform(value))}
           description={description}
           readOnly={readOnly}
           className={classNames}

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}`);
+  });
+});

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}`;
+};

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

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",

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

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",

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

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\"",