Fjernet ds-datepicker

apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/src/app/søknad/steps/annen-forelderens-situasjon/AnnenForelderenSituasjonStep.tsx

@@ -180,7 +180,7 @@ const AnnenForelderenSituasjonStep = () => {
                                                     ? undefined
                                                     : (value) =>
                                                           validateTildato(value, periodeFra, annenForelderSituasjon),
-                                                disabled: annenForelderPeriodeVetIkkeTom,
+                                                inputDisabled: annenForelderPeriodeVetIkkeTom,
                                             }}
                                             data-testid="annenForeldrensSituasjon-periode"
                                         />

apps/omsorgsdager-aleneomsorg-dialog/src/app/søknad/steps/tidspunkt-for-aleneomsorg/TidspunktForBarn.tsx

@@ -89,7 +89,7 @@ const TidspunktForBarn = ({ barnMedAleneomsorg, aleneomsorgTidspunkt }: Props) =
                         label={intlHelper(intl, 'step.tidspunktForAleneomsorg.siste2årene.dato.spm', {
                             navn: barnMedAleneomsorg.navn,
                         })}
-                        showYearSelector={true}
+                        dropdownCaption={true}
                         minDate={getMinDateYearAgo()}
                         maxDate={dateToday}
                         validate={(value) => {

apps/omsorgspengerutbetaling-soknad/src/app/søknad/steps/arbeidssituasjon/form-parts/FrilansFormPart.tsx

@@ -56,7 +56,7 @@ const FrilansFormPart: React.FC<Props> = ({ values }) => {
                             <DatePicker
                                 name={ArbeidssituasjonFormFields.frilans_startdato}
                                 label={intlHelper(intl, 'frilanser.nårStartet.spm')}
-                                showYearSelector={true}
+                                dropdownCaption={true}
                                 maxDate={dateToday}
                                 validate={getDateValidator({
                                     required: true,
@@ -78,7 +78,7 @@ const FrilansFormPart: React.FC<Props> = ({ values }) => {
                                 <DatePicker
                                     name={ArbeidssituasjonFormFields.frilans_sluttdato}
                                     label={intlHelper(intl, 'frilanser.nårSluttet.spm')}
-                                    showYearSelector={true}
+                                    dropdownCaption={true}
                                     minDate={datepickerUtils.getDateFromDateString(frilans_startdato)}
                                     maxDate={dateToday}
                                     validate={getDateValidator({

packages/sif-common-formik-ds/package.json

@@ -25,7 +25,6 @@
         "@babel/preset-typescript": "7.22.5",
         "@formatjs/intl-pluralrules": "5.2.4",
         "@navikt/ds-css": "4.11.2",
-        "@navikt/ds-datepicker": "4.2.0",
         "@navikt/ds-react": "4.11.2",
         "@navikt/fnrvalidator": "1.3.0",
         "@storybook/addon-a11y": "7.3.1",
@@ -74,7 +73,6 @@
     },
     "peerDependencies": {
         "@navikt/ds-css": "3",
-        "@navikt/ds-datepicker": ">=4.1.7",
         "@navikt/ds-react": "3",
         "formik": "2.x",
         "react-intl": "6.x"

packages/sif-common-formik-ds/src/components/formik-date-range-picker/FormikDateRangePicker.tsx

@@ -1,32 +1,29 @@
+import { DatePickerDefaultProps } from '@navikt/ds-react/esm/date/datepicker/DatePicker';
+/* eslint-disable no-console */
 import React from 'react';
 import { useFormikContext } from 'formik';
-import { UseFastFieldProps } from '../../types';
+import { TypedFormInputValidationProps, UseFastFieldProps } from '../../types';
+import { InputDateStringToISODateString } from '../formik-datepicker/dateFormatUtils';
 import { ISOStringToDate } from '../formik-datepicker/datepickerUtils';
-import FormikDatepicker, {
-    DatePickerBaseProps,
-    DatepickerLimitiations,
-    DatePickerPresentationProps,
-} from '../formik-datepicker/FormikDatepicker';
+import FormikDatepicker, { DatePickerBaseProps, DatepickerLimitations } from '../formik-datepicker/FormikDatepicker';
 import FormikInputGroup from '../formik-input-group/FormikInputGroup';
 import { getDateRangePickerLimitations } from './dateRangePickerUtils';
 import './dateRangePicker.scss';
 
 interface OwnProps<FieldName, ErrorType> {
     legend: string;
     description?: React.ReactNode;
-    showYearSelector?: boolean;
-    fullscreenOverlay?: boolean;
-    fullScreenOnMobile?: boolean;
     locale?: string;
     allowRangesToStartAndStopOnSameDate?: boolean;
     fromInputProps: DatePickerBaseProps<FieldName, ErrorType>;
     toInputProps: DatePickerBaseProps<FieldName, ErrorType>;
 }
 
 export type FormikDateRangePickerProps<FieldName, ErrorType> = OwnProps<FieldName, ErrorType> &
-    DatePickerPresentationProps &
-    DatepickerLimitiations &
-    UseFastFieldProps;
+    TypedFormInputValidationProps<FieldName, ErrorType> &
+    DatepickerLimitations &
+    UseFastFieldProps &
+    Pick<DatePickerDefaultProps, 'dropdownCaption'>;
 
 function FormikDateRangePicker<FieldName, ErrorType>({
     legend,
@@ -35,45 +32,53 @@ function FormikDateRangePicker<FieldName, ErrorType>({
     description,
     minDate,
     maxDate,
-    disableWeekend,
+    disableWeekends,
     disabledDateRanges,
-    showYearSelector,
-    fullScreenOnMobile,
-    fullscreenOverlay,
     allowRangesToStartAndStopOnSameDate,
     useFastField,
+    dropdownCaption,
+    validate,
     locale,
 }: FormikDateRangePickerProps<FieldName, ErrorType>) {
     const { values } = useFormikContext<any>();
-    const fromDate = ISOStringToDate(values[fromInputProps.name]);
-    const toDate = ISOStringToDate(values[toInputProps.name]);
+
+    const fromDate = ISOStringToDate(InputDateStringToISODateString(values[fromInputProps.name]));
+    const toDate = ISOStringToDate(InputDateStringToISODateString(values[toInputProps.name]));
+
     const { fromDateLimitations, toDateLimitations } = getDateRangePickerLimitations({
         fromDate,
         toDate,
         minDate,
         maxDate,
         dateRanges: disabledDateRanges,
-        disableWeekend,
+        disableWeekends,
         allowRangesToStartAndStopOnSameDate,
     });
+
     const name = `${fromInputProps.name}_${toInputProps.name}` as any;
+
     return (
-        <FormikInputGroup name={name} legend={legend} description={description} className="dateRangePicker">
+        <FormikInputGroup
+            name={name}
+            legend={legend}
+            description={description}
+            className="dateRangePicker"
+            validate={validate ? (value: any) => validate(value, name) : undefined}>
             <div className="dateRangePicker__flexContainer">
                 <div className="dateRangePicker__from">
                     <FormikDatepicker<FieldName, ErrorType>
                         {...fromInputProps}
-                        {...{ fullscreenOverlay, fullScreenOnMobile, showYearSelector }}
                         {...fromDateLimitations}
+                        dropdownCaption={dropdownCaption}
                         locale={locale as any}
                         useFastField={useFastField}
                     />
                 </div>
                 <div className="dateRangePicker__to">
                     <FormikDatepicker<FieldName, ErrorType>
                         {...toInputProps}
-                        {...{ fullscreenOverlay, fullScreenOnMobile, showYearSelector }}
                         {...toDateLimitations}
+                        dropdownCaption={dropdownCaption}
                         locale={locale as any}
                         useFastField={useFastField}
                     />

packages/sif-common-formik-ds/src/components/formik-date-range-picker/dateRangePickerUtils.ts

@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import minMax from 'dayjs/plugin/minMax';
 import { DateRange } from '../../types';
-import { DatepickerLimitiations } from '../formik-datepicker/FormikDatepicker';
+import { DatepickerLimitations } from '../formik-datepicker/FormikDatepicker';
 
 dayjs.extend(isSameOrBefore);
 dayjs.extend(minMax);
@@ -172,8 +172,8 @@ export const getMinDateForRangeEnd = ({
 };
 
 interface DateRangePickerLimitations {
-    fromDateLimitations: DatepickerLimitiations;
-    toDateLimitations: DatepickerLimitiations;
+    fromDateLimitations: DatepickerLimitations;
+    toDateLimitations: DatepickerLimitations;
 }
 
 export const getDateRangePickerLimitations = (props: {
@@ -188,7 +188,7 @@ export const getDateRangePickerLimitations = (props: {
     /** Other date ranges which become disabled in the datepicker */
     dateRanges?: DateRange[];
     /** Disallow selection of saturday and sunday */
-    disableWeekend?: boolean;
+    disableWeekends?: boolean;
     /** Allow one dateRange to start on the same date another ends */
     allowRangesToStartAndStopOnSameDate?: boolean;
 }): DateRangePickerLimitations => {
@@ -197,13 +197,13 @@ export const getDateRangePickerLimitations = (props: {
             minDate: getMinDateForRangeStart(props),
             maxDate: getMaxDateForRangeStart(props),
             disabledDateRanges: props.dateRanges,
-            disableWeekend: props.disableWeekend,
+            disableWeekends: props.disableWeekends,
         },
         toDateLimitations: {
             minDate: getMinDateForRangeEnd(props),
             maxDate: getMaxDateForRangeEnd(props),
             disabledDateRanges: props.dateRanges,
-            disableWeekend: props.disableWeekend,
+            disableWeekends: props.disableWeekends,
         },
     };
 };