0

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
2

2 Answers 2

1

Removing minDate={minDateObj} & maxDate={maxDateObj} solved my issue although I'm not sure why

0

you did not need to remove mindate and maxDate, instead minDateObj and maxDateObj should have been initialised to undefined instead of null if they are not being used. Setting to undefined means the minDate and maxDate attributes will not to be included and hence the user can choose any date using the keyboard buttons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.