first hacky approach

pages/step1.js

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+
+import moment from 'moment'
+
+import 'react-dates/initialize'
+import { DateRangePicker, SingleDatePicker } from 'react-dates'
+
+export default function Home() {
+
+  const [multipleDays, setMultipleDays] = useState(null);
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [focusedInput, setFocusedInput ] = useState(null);
+
+  return (
+    <form>
+      <div>
+        Ich will das Bussle für
+        <div>
+            <input type="radio" id="single" name="days" value="singleDay" onChange={() => setMultipleDays(false)} />
+            <label for="single">einen Tag</label> 
+        </div>
+        <div>
+          <input type="radio" id="multiple" name="days" value="multipleDays" onChange={() => setMultipleDays(true)}/>
+          <label for="multiple">mehrere Tage</label>
+        </div>
+        {' '}mieten
+      </div>
+
+      { multipleDays === false && (
+        <div>
+          <SingleDatePicker
+            date={startDate}
+            onDateChange={date => setStartDate(date)}
+            focused={typeof focusedInput === 'boolean' && focusedInput}
+            onFocusChange={({ focused }) => setFocusedInput(focused)}
+            id="your_unique_id"
+          />
+        </div>
+      ) }
+
+      { multipleDays === true && (
+        <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>
+      )}
+    </form>
+  )
+}