more funky commits

components/dateSelect.js

@@ -0,0 +1,80 @@
+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
+}