Currently picked up a project that has react-datepicker
and one of the issues is that the keyboard arrows don't really do anything while they should.
This is the component
import React, { FC, useMemo } from 'react'
import moment, { Moment } from 'moment'
import { default as ReactDatePicker } from 'react-datepicker'
import css from './date-picker.module.css'
import ArrowIcon from '../Icons/ArrowIcon'
interface Props {
id: string
label: string
icon: JSX.Element
date: Moment | null
onChange: Function
minDate?: Moment | null
maxDate?: Moment | null
selectsStart?: boolean
selectsEnd?: boolean
}
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
]
const customHeader = ({
date,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled,
}: any) => (
<div className={css.header}>
<button
className={css.backArrow}
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
>
<ArrowIcon width={16} height={16} className={css.arrowIcon} />
</button>
<span>
{months[date.getMonth()]} {date.getFullYear()}
</span>
<button
className={css.nextArrow}
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
>
<ArrowIcon width={16} height={16} className={css.arrowIcon} />
</button>
</div>
)
const DatePicker: FC<Props> = ({
label,
icon,
date,
onChange,
minDate,
maxDate,
selectsStart,
selectsEnd,
}) => {
const dateObj = useMemo(() => (date ? date.toDate() : null), [date])
const minDateObj = useMemo(() => (minDate ? minDate.toDate() : null), [
minDate,
])
const maxDateObj = useMemo(() => (maxDate ? maxDate.toDate() : null), [
maxDate,
])
return (
<div className={css.host}>
<div className={css.label}>{label}</div>
<div className={`${css.wrapper}`}>
{icon}
<ReactDatePicker
selected={dateObj}
className={css.input}
calendarClassName={css.calendar}
showTimeSelect
dateFormat="dd/MM/yyyy h:mm aa"
onChange={newDate => {
if (newDate) {
onChange(moment(newDate))
}
}}
startDate={minDateObj}
endDate={maxDateObj}
minDate={minDateObj}
maxDate={maxDateObj}
selectsStart={selectsStart}
selectsEnd={selectsEnd}
showPopperArrow={false}
popperModifiers={{
offset: {
enabled: true,
offset: '-28px, 4px',
},
}}
renderCustomHeader={customHeader}
/>
</div>
</div>
)
}
export default DatePicker
minDate={minDateObj}
&maxDate={maxDateObj}