pfadi-bussle/components/book/dateSelect.tsx

import React, { useContext } from 'react'
import { BookContext } from '../../context/book'
import InputWrapper from '../inputWrapper'
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 (
    <>
      <InputWrapper label="Datum" required>
        <Calendar
          start={dateFormatBackend(startDate)}
          end={dateFormatBackend(endDate)}
          onChange={onChange}
          className="my-6 max-w-lg"
        />
      </InputWrapper>
      <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={dateFormatBackend(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={dateFormatBackend(endDate) || ''}
            placeholder="Von"
            onChange={onChangeEvent}
            min={dateFormatBackend(startDate) || today}
          />
        </div>
      </div>
    </>
  )
}