Day Picker based on Airbnb react-dates

react-dates-day-picker.tsx

import React, { useState } from 'react'
import { SingleDatePicker } from 'react-dates'
import moment from 'moment'

export function AppDayPicker({ value, onChange, ...props }) {

  const [date, setDate] = useState(null)
  const [focusedInput, setFocusedInput] = useState(null)

  const returnYears = () => {
    let years = []
    for (let i = moment().year() - 100; i <= moment().year(); i++) {
      years.push(<option value={i}>{i}</option>)
    }
    return years
  }

  const renderMonthElement = ({ month, onMonthSelect, onYearSelect }) => (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div>
        <select
          value={month.month()}
          onChange={(e) => onMonthSelect(month, e.target.value)}
        >
          {moment.months().map((label, value) => (
            <option value={value}>{label}</option>
          ))}
        </select>
      </div>
      <div>
        <select
          value={month.year()}
          onChange={(e) => onYearSelect(month, e.target.value)}
        >
          {returnYears()}
        </select>
      </div>
    </div>
  )

  return (
    <SingleDatePicker
      date={date}
      focused={focusedInput}
      onDateChange={(date) => {
        setDate(date)
      }}
      onFocusChange={(focused) => {
        setFocusedInput(focused)
      }}
      renderMonthElement={renderMonthElement}
    />
  )
}