pfadi-bussle/components/dateSelect.js

import moment from 'moment'

import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'

import TimeSelect from './timeSelect'

export default function DateSelect({
  multipleDays,
  startDate,
  setStartDate,
  endDate,
  setEndDate,
  focusedInput,
  setFocusedInput,
  pickupTime,
  setPickupTime,
  dropoffTime,
  setDropoffTime,
}) {
  const timeSelect = (
    <>
      <TimeSelect
        id="pickup"
        name="pickupTime"
        label="Abholung Uhrzeit"
        value={pickupTime}
        setValue={setPickupTime}
      />
      <TimeSelect
        id="dropoff"
        name="dropoffTime"
        label="Rückgabe Uhrzeit"
        value={dropoffTime}
        setValue={setDropoffTime}
      />
    </>
  )
  if (multipleDays === false) {
    return (
      <>
        <div>
          <SingleDatePicker
            date={startDate}
            onDateChange={(date) => setStartDate(date)}
            focused={typeof focusedInput === 'boolean' && focusedInput}
            onFocusChange={({ focused }) => setFocusedInput(focused)}
            id="your_unique_id"
          />
        </div>
        {timeSelect}
      </>
    )
  }

  if (multipleDays === true) {
    return (
      <>
        <div>
          <DateRangePicker
            startDate={startDate}
            startDateId="bussle_start_date_id"
            endDate={endDate}
            endDateId="bussle_end_date_id"
            onDatesChange={({ startDate, endDate }) => {
              setStartDate(startDate)
              setEndDate(endDate)
            }}
            focusedInput={focusedInput}
            onFocusChange={(focusedInput) => setFocusedInput(focusedInput)}
            minDate={moment()}
          />
        </div>
        {timeSelect}
      </>
    )
  }

  return null
}