From 2f5d57fa99ca0398cdd80deff77f99c088b045c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= <tuva.odegard@sparebank1.no>
Date: Tue, 12 Nov 2024 08:54:43 +0100
Subject: [PATCH] =?UTF-8?q?chore:=20pusher=20for=20at=20peter=20kan=20se?=
 =?UTF-8?q?=20p=C3=A5,=20ikke=20ferdig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/calendar/Calendar.tsx                 |   8 +
 .../src/calendar/Header.tsx                   |  50 +-
 .../src/datelogic/simplecalendar.ts           |  20 +
 .../src/datepicker/Datepicker.stories.tsx     |   2 +-
 .../src/datepicker/Datepicker.tsx             | 529 +++++++++---------
 packages/ffe-datepicker/less/calendar.less    |   6 +-
 packages/ffe-datepicker/less/dateinput.less   |  53 +-
 7 files changed, 364 insertions(+), 304 deletions(-)

diff --git a/packages/ffe-datepicker-react/src/calendar/Calendar.tsx b/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
index c6ee7d8a75..567f93a9be 100644
--- a/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
+++ b/packages/ffe-datepicker-react/src/calendar/Calendar.tsx
@@ -168,6 +168,11 @@ export class Calendar extends Component<CalendarProps, State> {
         this.forceUpdate();
     }
 
+    changeMonth(value: number) {
+        this.state.calendar.changeMonth(value);
+        this.forceUpdate();
+    }
+
     renderDate(calendarButtonState: CalendarButtonState, index: number) {
         const { calendar } = this.state;
 
@@ -278,7 +283,10 @@ export class Calendar extends Component<CalendarProps, State> {
                         nextMonthLabel={calendar.nextName}
                         previousMonthHandler={this.previousMonth}
                         previousMonthLabel={calendar.previousName}
+                        changeMonthHandler={this.changeMonth}
                         year={calendar.focusedYear}
+                        startYear={calendar.minDate?.year}
+                        endYear={calendar.maxDate?.year}
                         prevMonthButtonElement={this.prevMonthButtonElementRef}
                         nextMonthButtonElement={this.nextMonthButtonElementRef}
                     />
diff --git a/packages/ffe-datepicker-react/src/calendar/Header.tsx b/packages/ffe-datepicker-react/src/calendar/Header.tsx
index 4b525f5ee3..c4b50b115e 100644
--- a/packages/ffe-datepicker-react/src/calendar/Header.tsx
+++ b/packages/ffe-datepicker-react/src/calendar/Header.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Icon } from '@sb1/ffe-icons-react';
+import { Dropdown } from '@sb1/ffe-dropdown-react';
+import { getAllMonths, getAllYears } from '../datelogic/simplecalendar';
 
 interface HeaderProps {
     datepickerId: string;
@@ -8,7 +10,10 @@ interface HeaderProps {
     nextMonthLabel: string;
     previousMonthHandler: React.MouseEventHandler<HTMLButtonElement>;
     previousMonthLabel: string;
+    changeMonthHandler: (value: number) => void;
     year: number;
+    startYear?: number;
+    endYear?: number;
     prevMonthButtonElement: React.RefObject<HTMLButtonElement>;
     nextMonthButtonElement: React.RefObject<HTMLButtonElement>;
 }
@@ -20,7 +25,10 @@ export const Header: React.FC<HeaderProps> = ({
     nextMonthLabel,
     previousMonthHandler,
     previousMonthLabel,
+    changeMonthHandler,
     year,
+    startYear = new Date().getFullYear() - 100,
+    endYear = new Date().getFullYear(),
     prevMonthButtonElement,
     nextMonthButtonElement,
 }) => {
@@ -49,9 +57,45 @@ export const Header: React.FC<HeaderProps> = ({
                     className="ffe-calendar__title"
                     id={`${datepickerId}-title`}
                 >
-                    <div id={`${datepickerId}__month-label`}>
-                        <span className="ffe-calendar__month">{month}</span>
-                        <span className="ffe-calendar__year">{year}</span>
+                    <div
+                        id={`${datepickerId}__month-label`}
+                        className="ffe-calendar__month-label"
+                    >
+                        <span className="ffe-calendar__month">
+                            <Dropdown
+                                value={month}
+                                inline={true}
+                                onChange={e => {
+                                    console.log('e', e.target.value);
+                                    changeMonthHandler(
+                                        parseInt(e.target.value),
+                                    );
+                                }}
+                            >
+                                {getAllMonths('nb').map(
+                                    (monthOption, index) => {
+                                        return (
+                                            <option key={index} value={index}>
+                                                {monthOption}
+                                            </option>
+                                        );
+                                    },
+                                )}
+                            </Dropdown>
+                        </span>
+                        <span className="ffe-calendar__year">
+                            <Dropdown value={year.toString()} inline={true}>
+                                {getAllYears(startYear, endYear).map(
+                                    (yearOption, index) => {
+                                        return (
+                                            <option key={index} value={index}>
+                                                {yearOption}
+                                            </option>
+                                        );
+                                    },
+                                )}
+                            </Dropdown>
+                        </span>
                     </div>
                 </header>
                 <button
diff --git a/packages/ffe-datepicker-react/src/datelogic/simplecalendar.ts b/packages/ffe-datepicker-react/src/datelogic/simplecalendar.ts
index 58c3a11abb..129d459e0f 100644
--- a/packages/ffe-datepicker-react/src/datelogic/simplecalendar.ts
+++ b/packages/ffe-datepicker-react/src/datelogic/simplecalendar.ts
@@ -48,6 +48,22 @@ function isDateWithinMinMax(
     return !(maxDate && date.isAfter(maxDate));
 }
 
+export function getAllMonths(locale: Locale): Array<string> {
+    return Array.from(
+        { length: 12 },
+        (_, i) =>
+            // @ts-ignore
+            i18n[locale][`MONTH_${i + 1}`],
+    );
+}
+
+export function getAllYears(startYear: number, endYear: number): Array<number> {
+    return Array.from(
+        { length: endYear - startYear + 1 },
+        (_, i) => startYear + i,
+    );
+}
+
 export class SimpleCalendar {
     locale: Locale;
     focusedDate: SimpleDate;
@@ -120,6 +136,10 @@ export class SimpleCalendar {
         this.focusedDate.adjust({ period: 'M', offset: -1 });
     }
 
+    public changeMonth(newMonth: number) {
+        this.focusedDate.month = newMonth;
+    }
+
     public nextWeek() {
         this.focusedDate.adjust({ period: 'D', offset: 7 });
     }
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx b/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx
index 0c85bc9db9..8a99042811 100644
--- a/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx
+++ b/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx
@@ -15,7 +15,7 @@ export const Standard: Story = {
     args: {
         locale: 'nb',
         maxDate: '31.12.2016',
-        minDate: '01.01.2016',
+        //minDate: '01.01.2020',
     },
     render: function Render({ value, onChange, ...args }) {
         const [date, setDate] = useState('01.01.2016');
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx b/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx
index b9f1a1676e..899e9998cb 100644
--- a/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx
+++ b/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx
@@ -1,8 +1,7 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 import { Calendar } from '../calendar';
-import { DateInput } from '../input';
 import { Button } from '../button';
 import { getSimpleDateFromString } from '../datelogic/simpledate';
 import { validateDate, isDateInputWithTwoDigitYear } from '../util/dateUtil';
@@ -25,303 +24,275 @@ export interface DatepickerProps {
     fullWidth?: boolean;
 }
 
-interface DatepickerState {
-    lastValidDate: string;
-    displayDatePicker: boolean;
-    minDate?: string | null;
-    maxDate?: string | null;
-    calendarActiveDate: string;
-    ariaInvalid?: boolean;
-}
-
-export class Datepicker extends Component<DatepickerProps, DatepickerState> {
-    private readonly datepickerId: string;
-
-    constructor(props: DatepickerProps) {
-        super(props);
-
-        this.state = {
-            displayDatePicker: false,
-            minDate: props.minDate,
-            maxDate: props.maxDate,
-            lastValidDate: '',
-            calendarActiveDate: validateDate(props.value) ? props.value : '',
+export const Datepicker: React.FC<DatepickerProps> = props => {
+    const {
+        'aria-invalid': ariaInvalidProp,
+        calendarAbove,
+        id,
+        inputProps = {},
+        locale = 'nb',
+        maxDate: maxDateProp,
+        minDate: minDateProp,
+        onChange,
+        value,
+        fullWidth,
+    } = props;
+
+    const [displayDatePicker, setDisplayDatePicker] = useState(false);
+    const [minDate, setMinDate] = useState(minDateProp);
+    const [maxDate, setMaxDate] = useState(maxDateProp);
+    const [lastValidDate, setLastValidDate] = useState('');
+    const [calendarActiveDate, setCalendarActiveDate] = useState(
+        validateDate(value) ? value : '',
+    );
+    const [ariaInvalidState, setAriaInvalidState] = useState<
+        boolean | undefined
+    >(false);
+    const [day, setDay] = useState('dd');
+    const [month, setMonth] = useState('mm');
+    const [year, setYear] = useState('yyyy');
+    const [focusedField, setFocusedField] = useState<
+        'day' | 'month' | 'year' | null
+    >(null);
+
+    const datepickerId = useRef(uuid());
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const dayRef = useRef<HTMLSpanElement>(null);
+    const monthRef = useRef<HTMLSpanElement>(null);
+    const yearRef = useRef<HTMLSpanElement>(null);
+
+    const debounceCalendar = useCallback(
+        debounce((newValue: any) => {
+            if (newValue !== lastValidDate && validateDate(newValue)) {
+                setCalendarActiveDate(newValue);
+                setLastValidDate(newValue);
+            }
+        }, 250),
+        [lastValidDate],
+    );
+
+    useEffect(() => {
+        return () => {
+            debounceCalendar.cancel();
         };
+    }, [debounceCalendar]);
+
+    const validateDateIntervals = () => {
+        const dateString = `${day}.${month}.${year}`;
+        getSimpleDateFromString(dateString, date => {
+            setAriaInvalidState(false);
+
+            const maxDateValidated = maxDateProp
+                ? getSimpleDateFromString(maxDateProp)
+                : null;
+
+            if (
+                maxDateValidated?.isBefore(date) &&
+                isDateInputWithTwoDigitYear(dateString)
+            ) {
+                date.adjust({ period: 'Y', offset: -100 });
+            }
+
+            const formattedDate = date.format();
+
+            if (formattedDate !== dateString) {
+                onChange(formattedDate);
+            }
+            setLastValidDate(formattedDate);
+        });
+    };
 
-        this.datepickerId = uuid();
-
-        this.openCalendar = this.openCalendar.bind(this);
-        this.closeCalendar = this.closeCalendar.bind(this);
-        this.closeCalendarSetInputFocus =
-            this.closeCalendarSetInputFocus.bind(this);
-        this.calendarButtonClickHandler =
-            this.calendarButtonClickHandler.bind(this);
-        this.addFlagOnClickEventClickHandler =
-            this.addFlagOnClickEventClickHandler.bind(this);
-        this.globalClickHandler = this.globalClickHandler.bind(this);
-        this.escKeyHandler = this.escKeyHandler.bind(this);
-        this.datePickedHandler = this.datePickedHandler.bind(this);
-        this.onInputKeydown = this.onInputKeydown.bind(this);
-        this.onInputBlur = this.onInputBlur.bind(this);
-    }
-
-    locale = this.props.locale ?? 'nb';
-    buttonRef = React.createRef<HTMLButtonElement>();
-    dateInputRef = this.props.inputProps?.ref ?? React.createRef();
-
-    debounceCalendar = debounce((value: any) => {
-        if (value !== this.state.lastValidDate && validateDate(value)) {
-            this.setState({ calendarActiveDate: value, lastValidDate: value });
-        }
-    }, 250);
-
-    componentWillUnmount() {
-        this.removeGlobalEventListeners();
-        this.debounceCalendar.cancel();
-    }
-
-    /* eslint-disable react/no-did-update-set-state */
-    componentDidUpdate(prevProps: DatepickerProps, prevState: DatepickerState) {
-        const valueChangedAndDatepickerIsToggled =
-            prevProps.value !== this.props.value &&
-            prevState.displayDatePicker &&
-            !this.state.displayDatePicker;
-        if (
-            (this.props.minDate && this.props.minDate !== this.state.minDate) ||
-            (this.props.maxDate && this.props.maxDate !== this.state.maxDate)
-        ) {
-            this.setState(
-                { minDate: this.props.minDate, maxDate: this.props.maxDate },
-                this.validateDateIntervals,
-            );
-        }
-
-        if (valueChangedAndDatepickerIsToggled) {
-            this.validateDateIntervals();
+    useEffect(() => {
+        if (minDateProp !== minDate || maxDateProp !== maxDate) {
+            setMinDate(minDateProp);
+            setMaxDate(maxDateProp);
+            validateDateIntervals();
         }
+        debounceCalendar(`${day}.${month}.${year}`);
+    }, [minDateProp, maxDateProp, day, month, year, debounceCalendar]);
 
-        this.debounceCalendar(this.props.value);
-    }
-
-    validateDateIntervals() {
-        this.setState((prevState, props) => {
-            let nextState = {};
-            const { onChange, value } = props;
+    const onInputBlur = () => {
+        validateDateIntervals();
+    };
 
-            getSimpleDateFromString(value, date => {
-                nextState = {
-                    ariaInvalid: false,
-                };
-
-                const maxDate = prevState.maxDate
-                    ? getSimpleDateFromString(prevState.maxDate)
-                    : null;
-
-                // SimpleDate.fromString assumes years written as two digits
-                // are in the 20th century.  This can be unwanted behaviour
-                // when asking for dates in the past, like birthdates.
-                // This little hack should catch most of these cases.
-                if (
-                    maxDate?.isBefore(date) &&
-                    isDateInputWithTwoDigitYear(value)
-                ) {
-                    date.adjust({ period: 'Y', offset: -100 });
+    const handleKeyDown = (
+        evt: React.KeyboardEvent<HTMLSpanElement>,
+        field: 'day' | 'month' | 'year',
+    ) => {
+        if (evt.key === 'Enter') {
+            evt.preventDefault();
+            validateDateIntervals();
+        } else if (/\d/.test(evt.key)) {
+            evt.preventDefault();
+            evt.stopPropagation();
+            const value = evt.key;
+            if (field === 'day') {
+                setDay(prev =>
+                    prev === 'dd' ? value : (prev + value).slice(-2),
+                );
+                if (dayRef.current && (day + value).length === 2) {
+                    monthRef.current?.focus();
                 }
-
-                const formattedDate = date.format();
-
-                if (formattedDate !== value) {
-                    onChange(formattedDate);
+            } else if (field === 'month') {
+                setMonth(prev =>
+                    prev === 'mm' ? value : (prev + value).slice(-2),
+                );
+                if (monthRef.current && (month + value).length === 2) {
+                    yearRef.current?.focus();
                 }
-
-                nextState = {
-                    ...nextState,
-                    lastValidDate: formattedDate,
-                };
-            });
-
-            return nextState;
-        });
-    }
-
-    onInputBlur(e: React.FocusEvent<HTMLInputElement>) {
-        this.props.inputProps?.onBlur?.(e);
-        this.validateDateIntervals();
-    }
-
-    onInputKeydown(evt: React.KeyboardEvent<HTMLInputElement>) {
-        this.props.inputProps?.onKeyDown?.(evt);
-        if (evt.key === 'Enter') {
+            } else if (field === 'year') {
+                setYear(prev =>
+                    prev === 'yyyy' ? value : (prev + value).slice(-4),
+                );
+            }
+        } else if (evt.key === 'Backspace') {
             evt.preventDefault();
-            this.validateDateIntervals();
+            if (field === 'day') {
+                setDay(prev => (prev.length > 1 ? prev.slice(0, -1) : 'dd'));
+            } else if (field === 'month') {
+                setMonth(prev => (prev.length > 1 ? prev.slice(0, -1) : 'mm'));
+            } else if (field === 'year') {
+                setYear(prev => (prev.length > 1 ? prev.slice(0, -1) : 'yyyy'));
+            }
         }
-    }
+    };
 
-    escKeyHandler(evt: KeyboardEvent) {
+    const closeCalendarSetInputFocus = () => {
+        setDisplayDatePicker(false);
+        buttonRef.current?.focus();
+        validateDateIntervals();
+    };
+
+    const escKeyHandler = (evt: KeyboardEvent) => {
         if (evt.key === 'Escape') {
-            this.closeCalendarSetInputFocus();
+            closeCalendarSetInputFocus();
         }
-    }
+    };
 
-    globalClickHandler(evt: MouseEvent) {
+    const globalClickHandler = (evt: MouseEvent) => {
         if (
-            this.state.displayDatePicker &&
-            // @ts-ignore
-            evt.__datepickerID !== this.datepickerId
+            displayDatePicker &&
+            (evt as any).__datepickerID !== datepickerId.current
         ) {
-            this.closeCalendar();
+            closeCalendarSetInputFocus();
         }
-    }
-
-    calendarButtonClickHandler() {
-        this.validateDateIntervals();
-
-        if (!this.state.displayDatePicker) {
-            this.openCalendar();
-        } else {
-            this.closeCalendar();
-        }
-    }
-
-    /**
-     * Adds a flag on the click event so that the globalClickHandler()
-     * can determine whether or not the ID matches. Makes it so that only one datepicker can be open at the same time
-     */
-    addFlagOnClickEventClickHandler(evt: React.MouseEvent) {
-        // @ts-ignore
-        // eslint-disable-next-line no-param-reassign
-        evt.nativeEvent.__datepickerID = this.datepickerId;
-    }
-
-    datePickedHandler(date: string) {
-        this.props.onChange(date);
-        this.removeGlobalEventListeners();
-        this.setState(
-            {
-                displayDatePicker: false,
-                calendarActiveDate: date,
-            },
-            () => this.buttonRef.current?.focus(),
-        );
-    }
-
-    openCalendar() {
-        this.setState({
-            displayDatePicker: true,
-        });
-        this.removeGlobalEventListeners();
-        this.addGlobalEventListeners();
-    }
+    };
 
-    closeCalendar() {
-        this.removeGlobalEventListeners();
-        this.setState({ displayDatePicker: false });
-        this.validateDateIntervals();
-    }
+    const addGlobalEventListeners = () => {
+        window.addEventListener('click', globalClickHandler);
+        window.addEventListener('keyup', escKeyHandler);
+    };
 
-    closeCalendarSetInputFocus() {
-        this.removeGlobalEventListeners();
-        this.setState(
-            {
-                displayDatePicker: false,
-            },
-            () => this.buttonRef.current?.focus(),
-        );
-        this.validateDateIntervals();
-    }
+    const removeGlobalEventListeners = () => {
+        window.removeEventListener('click', globalClickHandler);
+        window.removeEventListener('keyup', escKeyHandler);
+    };
 
-    addGlobalEventListeners() {
-        window.addEventListener('click', this.globalClickHandler);
-        window.addEventListener('keyup', this.escKeyHandler);
-    }
-
-    removeGlobalEventListeners() {
-        window.removeEventListener('click', this.globalClickHandler);
-        window.removeEventListener('keyup', this.escKeyHandler);
-    }
-
-    ariaInvalid() {
-        const ariaInvalid =
-            this.props['aria-invalid'] || this.props.ariaInvalid;
-
-        return [null, undefined].every(val => val !== ariaInvalid)
-            ? String(ariaInvalid)
-            : String(this.state.ariaInvalid);
-    }
-
-    render() {
-        const { inputProps = {}, onChange, value, fullWidth } = this.props;
-
-        const { minDate, maxDate } = this.state;
-
-        if (this.state.ariaInvalid && !inputProps['aria-describedby']) {
-            inputProps['aria-describedby'] =
-                `date-input-validation-${this.datepickerId}`;
+    useEffect(() => {
+        if (displayDatePicker) {
+            addGlobalEventListeners();
+        } else {
+            removeGlobalEventListeners();
         }
-
-        const calendarClassName = classNames(
-            'ffe-calendar ffe-calendar--datepicker',
-            { 'ffe-calendar--datepicker--above': this.props.calendarAbove },
-        );
-
-        const datepickerClassName = classNames('ffe-datepicker', {
-            'ffe-datepicker--full-width': fullWidth,
-        });
-
-        return (
-            <div>
-                {/*
-                 * This element is not an actual button, but the onClick is something that happens under the hood,
-                 * that the user is not aware of. So it is not a semantic button for the user.
-                 * Thus we do not want to add a role, so we suppress the linting rule.
-                 */}
-                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                <div
-                    className={datepickerClassName}
-                    data-testid="date-picker"
-                    onClick={this.addFlagOnClickEventClickHandler}
-                    tabIndex={-1}
-                >
-                    <div className="ffe-datepicker--wrapper">
-                        <DateInput
-                            id={this.props.id}
-                            {...this.props.inputProps}
-                            ariaInvalid={this.ariaInvalid()}
-                            onBlur={this.onInputBlur}
-                            onChange={evt => {
-                                this.props.inputProps?.onChange?.(evt);
-                                onChange(evt.target.value);
-                            }}
-                            onKeyDown={this.onInputKeydown}
-                            ref={this.dateInputRef}
-                            value={value}
-                            locale={this.locale}
-                        />
-                        <Button
-                            onClick={this.calendarButtonClickHandler}
-                            value={value}
-                            locale={this.locale}
-                            ref={this.buttonRef}
-                        />
+        return () => {
+            removeGlobalEventListeners();
+        };
+    }, [displayDatePicker]);
+
+    const calendarButtonClickHandler = () => {
+        validateDateIntervals();
+        setDisplayDatePicker(!displayDatePicker);
+    };
+
+    const addFlagOnClickEventClickHandler = (evt: React.MouseEvent) => {
+        const nativeEvent = evt.nativeEvent as any;
+        nativeEvent.__datepickerID = datepickerId.current;
+    };
+
+    const datePickedHandler = (date: string) => {
+        onChange(date);
+        setDisplayDatePicker(false);
+        setCalendarActiveDate(date);
+        buttonRef.current?.focus();
+    };
+
+    const calendarClassName = classNames(
+        'ffe-calendar ffe-calendar--datepicker',
+        { 'ffe-calendar--datepicker--above': calendarAbove },
+    );
+
+    const datepickerClassName = classNames('ffe-datepicker', {
+        'ffe-datepicker--full-width': fullWidth,
+    });
+
+    return (
+        <div>
+            <div
+                className={datepickerClassName}
+                data-testid="date-picker"
+                onClick={addFlagOnClickEventClickHandler}
+                tabIndex={-1}
+            >
+                <div className="ffe-datepicker--wrapper">
+                    <div
+                        className="ffe-input-field ffe-dateinput"
+                        onBlur={onInputBlur}
+                        tabIndex={0}
+                    >
+                        <span
+                            className="ffe-dateinput__field"
+                            tabIndex={0}
+                            onFocus={() => dayRef.current?.focus()}
+                            onKeyDown={e => handleKeyDown(e, 'day')}
+                            ref={dayRef}
+                        >
+                            {day}
+                        </span>
+                        .
+                        <span
+                            className="ffe-dateinput__field"
+                            tabIndex={0}
+                            onFocus={() => monthRef.current?.focus()}
+                            onKeyDown={e => handleKeyDown(e, 'month')}
+                            ref={monthRef}
+                        >
+                            {month}
+                        </span>
+                        .
+                        <span
+                            className="ffe-dateinput__field"
+                            tabIndex={0}
+                            onFocus={() => yearRef.current?.focus()}
+                            onKeyDown={e => handleKeyDown(e, 'year')}
+                            ref={yearRef}
+                        >
+                            {year}
+                        </span>
                     </div>
-                    {this.state.displayDatePicker && (
-                        <Calendar
-                            calendarClassName={calendarClassName}
-                            escKeyHandler={evt => {
-                                if (evt.key === 'Escape') {
-                                    this.closeCalendarSetInputFocus();
-                                }
-                            }}
-                            locale={this.locale}
-                            maxDate={maxDate}
-                            minDate={minDate}
-                            onDatePicked={this.datePickedHandler}
-                            selectedDate={this.state.calendarActiveDate}
-                            focusOnMount={true}
-                        />
-                    )}
+                    <Button
+                        onClick={calendarButtonClickHandler}
+                        value={value}
+                        locale={locale}
+                        ref={buttonRef}
+                    />
                 </div>
+                {displayDatePicker && (
+                    <Calendar
+                        calendarClassName={calendarClassName}
+                        escKeyHandler={evt => {
+                            if (evt.key === 'Escape') {
+                                closeCalendarSetInputFocus();
+                            }
+                        }}
+                        locale={locale}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        onDatePicked={datePickedHandler}
+                        selectedDate={calendarActiveDate}
+                        focusOnMount={true}
+                    />
+                )}
             </div>
-        );
-    }
-}
+        </div>
+    );
+};
diff --git a/packages/ffe-datepicker/less/calendar.less b/packages/ffe-datepicker/less/calendar.less
index 3c2939fe3c..392fd5a673 100644
--- a/packages/ffe-datepicker/less/calendar.less
+++ b/packages/ffe-datepicker/less/calendar.less
@@ -28,7 +28,7 @@
 
     &__header-inner-wrapper {
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
     }
 
@@ -61,6 +61,10 @@
         }
     }
 
+    &__month-label {
+        display: flex;
+    }
+
     &__icon-prev.ffe-icons,
     &__icon-next.ffe-icons {
         color: var(--ffe-v-datepicker-icon-color);
diff --git a/packages/ffe-datepicker/less/dateinput.less b/packages/ffe-datepicker/less/dateinput.less
index ff898d198e..143038e687 100644
--- a/packages/ffe-datepicker/less/dateinput.less
+++ b/packages/ffe-datepicker/less/dateinput.less
@@ -1,37 +1,49 @@
 .ffe-dateinput {
     position: relative;
     display: inline-block;
+    grid-column: 1 e('/') 3;
+    grid-row: 1 e('/') -1;
+    min-width: 210px;
 
     &--full-width {
         display: block;
     }
+    //
+    //@media (hover: hover) and (pointer: fine) {
+    //    &:hover {
+    //        color: var(--ffe-g-primary-color);
+    //    }
+    //}
 
-    @media (hover: hover) and (pointer: fine) {
-        &:hover {
-            color: var(--ffe-g-primary-color);
-        }
+    &[aria-invalid='true'] {
+        border-color: var(--ffe-g-error-color);
+        border-style: solid;
+    }
+
+    //@media (hover: hover) and (pointer: fine) {
+    //    /* stylelint-disable selector-max-specificity */
+    //    &:focus + .ffe-datepicker__button:hover {
+    //        border-color: red !important;
+    //        box-shadow: 0 0 0 2px var(--ffe-v-datepicker-border-hover-color);
+    //    }
+    //    /* stylelint-enable selector-max-specificity */
+    //}
+
+    &.ffe-input-field {
+        display: flex;
+        align-items: center;
     }
 
     &__field {
-        min-width: 160px;
-        grid-column: 1 e('/') 3;
-        grid-row: 1 e('/') -1;
-        &::-ms-clear {
-            display: none;
-        }
+        padding-block: var(--ffe-spacing-2xs);
 
-        &[aria-invalid='true'] {
-            border-color: var(--ffe-g-error-color);
-            border-style: solid;
+        &:focus {
+            background-color: var(--ffe-farge-frost-30);
+            outline: none;
         }
 
-        @media (hover: hover) and (pointer: fine) {
-            /* stylelint-disable selector-max-specificity */
-            &:focus + .ffe-datepicker__button:hover {
-                border-color: transparent;
-                box-shadow: 0 0 0 2px var(--ffe-v-datepicker-border-hover-color);
-            }
-            /* stylelint-enable selector-max-specificity */
+        &::-ms-clear {
+            display: none;
         }
     }
 }
@@ -60,6 +72,7 @@
         transition: all var(--ffe-transition-duration) var(--ffe-ease);
         width: 56px;
         cursor: pointer;
+        z-index: 1;
 
         &:focus,
         &:active {