Datepicker og Monthpicker mindre refaktorering

apps/dolly-frontend/src/main/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolly",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "type": "module",
   "description": "",
   "main": "index.js",

apps/dolly-frontend/src/main/js/src/components/fagsystem/aareg/form/partials/arbeidsforholdForm.tsx

@@ -89,8 +89,16 @@ export const ArbeidsforholdForm = ({
 	}
 
 	const { setError, watch, control, getValues, setValue, trigger, resetField } = useFormContext()
-	const [navArbeidsforholdPeriode, setNavArbeidsforholdPeriode] = useState(null as unknown as Date)
-	const { tidligereBestillinger } = useContext(BestillingsveilederContext)
+	const eksisterendeArbeidsforholdPeriode = watch(`${path}.navArbeidsforholdPeriode`)
+	const [navArbeidsforholdPeriode, setNavArbeidsforholdPeriode] = useState(
+		eksisterendeArbeidsforholdPeriode
+			? new Date(
+					eksisterendeArbeidsforholdPeriode.year,
+					eksisterendeArbeidsforholdPeriode.monthValue,
+				)
+			: null,
+	)
+	const { tidligereBestillinger }: any = useContext(BestillingsveilederContext)
 	const tidligereAaregBestillinger = hentUnikeAaregBestillinger(tidligereBestillinger)
 	const erLaastArbeidsforhold =
 		(arbeidsgiverType === ArbeidsgiverTyper.felles ||
@@ -101,12 +109,13 @@ export const ArbeidsforholdForm = ({
 		if (_.isEmpty(tidligereAaregBestillinger) || harGjortFormEndringer()) {
 			return
 		}
-		resetField('aareg', {
-			defaultValue: tidligereAaregBestillinger?.map((aaregBestilling) => {
+		setValue(
+			'aareg',
+			tidligereAaregBestillinger?.map((aaregBestilling) => {
 				aaregBestilling.isOppdatering = true
 				return aaregBestilling
 			}),
-		})
+		)
 		trigger('aareg')
 	}, [watch('aareg')])
 
@@ -306,6 +315,7 @@ export const ArbeidsforholdForm = ({
 					date={navArbeidsforholdPeriode}
 					label="NAV arbeidsforholdsperiode"
 					onChange={setNavArbeidsforholdPeriode}
+					value={navArbeidsforholdPeriode}
 					isClearable={true}
 				/>
 				{arbeidsforholdstype === 'forenkletOppgjoersordning' && (

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/datepicker/Datepicker.tsx

@@ -1,5 +1,5 @@
 import { registerLocale } from 'react-datepicker'
-import { addYears, subYears } from 'date-fns'
+import { addYears, isDate, subYears } from 'date-fns'
 import locale_nb from 'date-fns/locale/nb'
 import { Label } from '@/components/ui/form/inputs/label/Label'
 import { InputWrapper } from '@/components/ui/form/inputWrapper/InputWrapper'
@@ -10,11 +10,12 @@ import './Datepicker.less'
 import { useFormContext } from 'react-hook-form'
 import { DatePicker, useDatepicker } from '@navikt/ds-react'
 import _ from 'lodash'
+import { formatDate } from '@/utils/DataFormatter'
 
 registerLocale('nb', locale_nb)
 
 function addHours(date, amount) {
-	date.setHours(amount, 0, 0)
+	date.setHours(amount)
 	return date
 }
 
@@ -30,23 +31,36 @@ export const Datepicker = ({
 	maxDate,
 }) => {
 	const formMethods = useFormContext()
-	const eksisterendeVerdi = formMethods.watch(name)
-	const { datepickerProps, inputProps, selectedDay } = useDatepicker({
+
+	const getSelectedDay = () => {
+		const selected = formMethods.watch(name)
+		if (_.isNil(selected) || _.isEmpty(selected)) {
+			return undefined
+		} else if (isDate(selected)) {
+			return fixTimezone(selected)
+		} else {
+			return fixTimezone(new Date(selected))
+		}
+	}
+
+	const { datepickerProps, inputProps } = useDatepicker({
 		fromDate: minDate || subYears(new Date(), 125),
 		toDate: maxDate || addYears(new Date(), 5),
 		onDateChange: onChange || onBlur,
-		defaultSelected: !_.isEmpty(eksisterendeVerdi) ? new Date(eksisterendeVerdi) : undefined,
 		disabled: excludeDates,
+		defaultSelected: getSelectedDay(),
 	})
+	const selectedDay = getSelectedDay()
 
 	return (
 		<DatePicker {...datepickerProps} dropdownCaption={true} selected={selectedDay}>
 			<DatePicker.Input
+				{...inputProps}
+				value={selectedDay ? formatDate(selectedDay) : ''}
 				placeholder={placeholder}
 				size={'small'}
 				disabled={disabled}
 				label={null}
-				{...inputProps}
 			/>
 		</DatePicker>
 	)

apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/monthpicker/Monthpicker.tsx

@@ -1,7 +1,7 @@
 import { Label } from '@/components/ui/form/inputs/label/Label'
 import { InputWrapper } from '@/components/ui/form/inputWrapper/InputWrapper'
 import { MonthPicker, useMonthpicker } from '@navikt/ds-react'
-import { addYears, subYears } from 'date-fns'
+import { addYears, isDate, subYears } from 'date-fns'
 import { useFormContext } from 'react-hook-form'
 import _ from 'lodash'
 
@@ -28,24 +28,42 @@ export const Monthpicker = ({
 	...props
 }: MonthpickerProps) => {
 	const formMethods = useFormContext()
-	const eksisterendeVerdi = formMethods.watch(name)
+	const val = formMethods.watch(name)
 
-	const formattedDate = date instanceof Date || date === null ? date : new Date(date)
+	function getEksisterendeVerdi() {
+		if (name.includes('navArbeidsforholdPeriode')) {
+			return val?.year ? new Date(val?.year, val?.monthValue) : null
+		}
+		return val
+	}
 
-	const { monthpickerProps, inputProps, selectedMonth } = useMonthpicker({
+	const eksisterendeVerdi = getEksisterendeVerdi()
+
+	const formattedDate =
+		eksisterendeVerdi instanceof Date
+			? eksisterendeVerdi
+			: date instanceof Date || date === null
+				? date
+				: new Date(date)
+
+	const { monthpickerProps, inputProps } = useMonthpicker({
 		fromDate: minDate || subYears(new Date(), 125),
 		toDate: maxDate || addYears(new Date(), 5),
 		onMonthChange: (selectedDate) => {
-			selectedDate?.setHours(12, 0, 0, 0)
+			selectedDate?.setHours(12)
 			onChange ? onChange(selectedDate) : handleDateChange(selectedDate)
 		},
-		defaultSelected: !_.isEmpty(eksisterendeVerdi) ? new Date(eksisterendeVerdi) : undefined,
+		defaultSelected: !_.isNil(formattedDate)
+			? isDate(formattedDate)
+				? formattedDate
+				: new Date(formattedDate)
+			: undefined,
 	})
 
 	return (
 		<InputWrapper size={'small'}>
 			<Label name={name} label={label}>
-				<MonthPicker dropdownCaption={true} selected={formattedDate} {...monthpickerProps}>
+				<MonthPicker {...monthpickerProps} dropdownCaption={true} selected={formattedDate}>
 					<MonthPicker.Input label={null} size={'small'} placeholder={'yyyy-mm'} {...inputProps} />
 				</MonthPicker>
 			</Label>