pfadi-bussle/components/book/dateSelect.tsx

import React, { useContext } from 'react'
import { BookContext } from '../../context/book'
import Input from '../input'
import Calendar from '../calendar'
import { dateFormatBackend } from '../../helpers/date'

export default function DateSelect() {
  const { onChangeEvent, onChange, state } = useContext(BookContext)
  const { startDate, endDate } = state.formData

  const today = dateFormatBackend(new Date())

  return (
    <>
      <Calendar
        start={startDate}
        end={endDate}
        onChange={onChange}
        className="my-6 max-w-lg"
      />
      <div className="flex flex-wrap -mx-3 mb-2">
        <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
          <Input
            label="Von"
            type="date"
            className=""
            name="startDate"
            value={startDate || ''}
            onChange={onChangeEvent}
            min={today}
            required
          />
        </div>
        <div className="w-full md:w-2/5 px-3 mb-2 md:mb-0">
          <Input
            required
            label="Bis"
            type="date"
            className=""
            name="endDate"
            value={endDate || ''}
            placeholder="Von"
            onChange={onChangeEvent}
            min={startDate || today}
          />
        </div>
      </div>
    </>
  )
}