diff --git a/packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx b/packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx index 53503b5a0c..029636b602 100644 --- a/packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx +++ b/packages/ffe-datepicker-react/src/datepicker/DatepickerComp.tsx @@ -29,7 +29,9 @@ export interface DatepickerCompProps { onBlur?: (evt: React.FocusEvent) => void; calendarAbove?: boolean; id?: string; + /* Latest allowed date. With format 'dd.mm.yyyy'*/ maxDate?: string | null; + /* Earliest allowed date. With format 'dd.mm.yyyy'*/ minDate?: string | null; onChange: (date: string) => void; fullWidth?: boolean; @@ -116,6 +118,9 @@ export const DatepickerComp: React.FC = ({ if (formattedDate !== dateString) { onChange(formattedDate); + setDay([date.date]); + setMonth([date.month + 1]); + setYear([date.year]); } setLastValidDate(formattedDate); }); @@ -224,6 +229,19 @@ export const DatepickerComp: React.FC = ({ return ariaDescribedbyTotal as unknown as React.ComponentPropsWithRef<'span'>['aria-describedby']; }; + const handlePaste = (evt: React.ClipboardEvent) => { + evt.preventDefault(); + + const paste = (evt.clipboardData || window.Clipboard).getData('text'); + const date = getSimpleDateFromString(paste); + if (date) { + setDay([date.date]); + setMonth([date.month + 1]); + setYear([date.year]); + onChange(`${day}.${month}.${year}`); + } + }; + return ( // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/no-noninteractive-element-interactions
= ({ elementReceivingFocus !== monthRef.current ) { onBlur?.(evt); + validateDateIntervals(); } }} > @@ -261,6 +280,7 @@ export const DatepickerComp: React.FC = ({ value={day ?? undefined} min={1} max={31} + onPaste={handlePaste} onSpinButtonChange={(newValue, allowFocusNext = true) => { onChange( `${padZero(toNumber(newValue))}.${month}.${year}`, @@ -291,6 +311,7 @@ export const DatepickerComp: React.FC = ({ value={month ?? undefined} min={1} max={12} + onPaste={handlePaste} onSpinButtonChange={(newValue, allowFocusNext = true) => { onChange( `${day}.${padZero(toNumber(newValue))}.${year}`, @@ -328,6 +349,7 @@ export const DatepickerComp: React.FC = ({ value={year ?? undefined} min={1} max={9999} + onPaste={handlePaste} onSpinButtonChange={newValue => { onChange(`${day}.${month}.${newValue}`); setYear(newValue); diff --git a/packages/ffe-datepicker-react/src/datepicker/SpinButton.tsx b/packages/ffe-datepicker-react/src/datepicker/SpinButton.tsx index c0f56d15bd..1338e45fb2 100644 --- a/packages/ffe-datepicker-react/src/datepicker/SpinButton.tsx +++ b/packages/ffe-datepicker-react/src/datepicker/SpinButton.tsx @@ -40,9 +40,14 @@ export const SpinButton = React.forwardRef( ? (history.current = [parseInt(evt.key)]) : history.current.concat(parseInt(evt.key)); onSpinButtonChange(history.current); - } else if (evt.key === 'Backspace') { + } else if (evt.key === 'Backspace' || evt.key === 'Delete') { history.current = []; - onSpinButtonChange(history.current); + if (value === 0) { + prevSpinButton?.current?.focus(); + return; + } + const newValue = value?.toString().slice(0, -1); + onSpinButtonChange(newValue ? [parseInt(newValue)] : []); } else if (evt.key === 'ArrowUp') { evt.preventDefault(); let newValue = (value ?? 0) + 1;