further progress on react-day-picker

components/dateSelect.js

@@ -1,11 +1,13 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, useRef } from 'react'
 import useSWR from 'swr'
 
 import { WizardContext } from '../context/wizardStore'
 
 import Form from 'react-bootstrap/Form'
+import Button from 'react-bootstrap/Button'
 
 import DayPicker, { DateUtils } from 'react-day-picker'
+import DayPickerInput from 'react-day-picker/DayPickerInput'
 
 import Required from './required'
 import { dateFormat } from '../helpers/date'
@@ -23,18 +25,29 @@ export default function DateSelect() {
   )
   const prevBookedDay = getNextSmaller(daysBooked, dateFormat(range.from))
   const nextBookedDay = getNextBigger(daysBooked, dateFormat(range.from))
+  console.log(range.from, range.to)
+  console.log(prevBookedDay, nextBookedDay)
+
+  const fromRef = useRef()
+  const toRef = useRef()
 
   function dayBooked(day) {
     return daysBooked && daysBooked.includes(dateFormat(day))
   }
 
   function dayDisabled(day) {
-    return (
+    const result =
       DateUtils.isPastDay(day) ||
       dayBooked(day) ||
       (prevBookedDay && day < new Date(prevBookedDay)) ||
       (nextBookedDay && day > new Date(nextBookedDay))
-    )
+
+    console.log(day, result)
+    return result
+  }
+
+  function parseDate(value) {
+    return new Date(value)
   }
 
   const { multipleDays } = state.formData
@@ -100,7 +113,7 @@ export default function DateSelect() {
             Datum <Required />
           </Form.Label>
           {multipleDays === false && <p>not implemented</p>}
-          {multipleDays === true && (
+          {multipleDays === false && (
             <DayPicker
               className="Selectable"
               numberOfMonths={2}
@@ -117,6 +130,56 @@ export default function DateSelect() {
               }}
             />
           )}
+          {
+            <>
+              <Form.Group>
+                <DayPickerInput
+                  ref={fromRef}
+                  // seems this makes getInput NOT work anymore :(
+                  component={(props) => <Form.Control {...props} />}
+                  value={from}
+                  placeholder="Von"
+                  formatDate={dateFormat}
+                  parseDate={parseDate}
+                  dayPickerProps={{
+                    className: 'Selectable',
+                    selectedDays: [from, { from, to }],
+                    disabledDays,
+                    modifiers,
+                    numberOfMonths: 1,
+                    onDayClick: () => toRef.current?.getInput().focus(),
+                  }}
+                  onDayChange={(from) => setRange({ ...range, from })}
+                />
+                <Form.Label className="px-2">bis</Form.Label>
+                <DayPickerInput
+                  ref={toRef}
+                  component={(props) => <Form.Control {...props} />}
+                  value={to}
+                  placeholder="Bis"
+                  formatDate={dateFormat}
+                  parseDate={parseDate}
+                  dayPickerProps={{
+                    className: 'Selectable',
+                    selectedDays: [from, { from, to }],
+                    disabledDays,
+                    modifiers,
+                    numberOfMonths: 1,
+                    month: from,
+                    fromMonth: from,
+                  }}
+                  onDayChange={(to) => setRange({ ...range, to })}
+                />
+                <Button
+                  className="ml-2"
+                  variant="outline-secondary"
+                  onClick={() => setRange({})}
+                >
+                  Zurücksetzen
+                </Button>
+              </Form.Group>
+            </>
+          }
         </Form.Group>
       )}
     </>