date format

components/dateSelect.js

@@ -7,15 +7,21 @@ import { DateUtils } from 'react-day-picker'
 import DayPickerInput from 'react-day-picker/DayPickerInput'
 
 import Required from './required'
-import { dateFormat } from '../helpers/date'
+import { dateFormatBackend } from '../helpers/date'
 import { getNextSmaller, getNextBigger } from '../helpers/array'
 
+import MomentLocaleUtils, {
+  formatDate,
+  parseDate,
+} from 'react-day-picker/moment'
+import 'moment/locale/de'
+
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
   const { state, onChange } = useContext(WizardContext)
   const [range, setRange] = useState({
-    form: state.startDate && new Date(state.StartDate),
+    form: state.startDate && new Date(state.startDate),
     to: state.endDate && new Date(state.endDate),
   })
   const { from, to } = range
@@ -23,14 +29,17 @@ export default function DateSelect() {
     '/api/daysbooked',
     fetcher
   )
-  const prevBookedDay = getNextSmaller(daysBooked, dateFormat(from || to))
-  const nextBookedDay = getNextBigger(daysBooked, dateFormat(from || to))
+  const prevBookedDay = getNextSmaller(
+    daysBooked,
+    dateFormatBackend(from || to)
+  )
+  const nextBookedDay = getNextBigger(daysBooked, dateFormatBackend(from || to))
 
   const fromRef = useRef()
   const toRef = useRef()
 
   function dayBooked(day) {
-    return daysBooked && daysBooked.includes(dateFormat(day))
+    return daysBooked && daysBooked.includes(dateFormatBackend(day))
   }
 
   function dayDisabled(day) {
@@ -38,14 +47,11 @@ export default function DateSelect() {
       DateUtils.isPastDay(day) ||
       dayBooked(day) ||
       (prevBookedDay && day < new Date(prevBookedDay)) ||
-      (nextBookedDay && day > new Date(nextBookedDay))
+      (nextBookedDay && day > new Date(nextBookedDay)) ||
+      day < from
     )
   }
 
-  function parseDate(value) {
-    return new Date(value)
-  }
-
   useEffect(() => {
     toRef.current?.getInput().focus()
   }, [from])
@@ -78,29 +84,32 @@ export default function DateSelect() {
         </label>
         <DayPickerInput
           ref={fromRef}
-          inputProps={{ className: 'input-text w-32' }}
+          inputProps={{ className: 'input-text' }}
           value={from}
           placeholder="Von"
-          formatDate={dateFormat}
+          formatDate={formatDate}
           parseDate={parseDate}
           dayPickerProps={{
+            locale: 'de',
+            localeUtils: MomentLocaleUtils,
             className: 'datepicker',
-            selectedDays: [from, { from, to }],
             disabledDays,
             modifiers,
             numberOfMonths: 1,
           }}
           onDayChange={(from) => setRange({ ...range, from })}
         />
-        <label className="px-2">-</label>
+        {' - '}
         <DayPickerInput
           ref={toRef}
-          inputProps={{ className: 'input-text w-32', disabled: !from }}
+          inputProps={{ className: 'input-text', disabled: !from }}
           value={to}
           placeholder="Bis"
-          formatDate={dateFormat}
+          formatDate={formatDate}
           parseDate={parseDate}
           dayPickerProps={{
+            locale: 'de',
+            localeUtils: MomentLocaleUtils,
             className: 'datepicker',
             selectedDays: [from, { from, to }],
             disabledDays,
@@ -111,8 +120,13 @@ export default function DateSelect() {
           }}
           onDayChange={(to) => setRange({ ...range, to })}
         />
-        <button onClick={() => setRange({})} className="btn btn-gray">
-          Zurücksetzen
+        <button onClick={() => setRange({})} className="ibtn">
+          <svg class="w-full" viewBox="0 0 352 512">
+            <path
+              fill="currentColor"
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            ></path>
+          </svg>
         </button>
       </div>
     </div>