Блог

В настоящее время подобрал проект, в котором есть react-datepicker и одна из проблем заключается в том, что стрелки клавиатуры на самом деле ничего не делают, хотя должны. Это компонент

 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} amp; maxDate={maxDateObj} решило мою проблему, хотя я не уверен, почему

вам не нужно было удалять mindate и maxDate, вместо этого minDateObj и maxDateObj должны были быть инициализированы как undefined вместо null, если они не используются. Значение undefined означает, что атрибуты minDate и maxDate не будут включены, и, следовательно, пользователь может выбрать любую дату с помощью кнопок клавиатуры.