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>

helpers/date.js

@@ -1,8 +1,11 @@
 import moment from 'moment'
 
+const FRONTEND_FORMAT = 'DD.MM.YYYY'
+const BACKEND_FORMAT = 'YYYY-MM-DD'
+
 export function getDays({ startDate, endDate }) {
   let currentDay = moment(startDate)
-  const days = [dateFormat(currentDay)]
+  const days = [dateFormatBackend(currentDay)]
 
   if (!endDate) {
     return days
@@ -11,15 +14,36 @@ export function getDays({ startDate, endDate }) {
   const end = moment(endDate)
   while (currentDay < end) {
     currentDay = currentDay.add(1, 'day')
-    days.push(dateFormat(currentDay))
+    days.push(dateFormatBackend(currentDay))
   }
 
   return days
 }
 
-export function dateFormat(date) {
+function dateFormat(date, format) {
   if (!date) {
     return null
   }
-  return moment(date).format('YYYY-MM-DD')
+  return moment(date).format(format)
+}
+
+export function dateFormatBackend(date) {
+  return dateFormat(date, BACKEND_FORMAT)
+}
+
+export function dateFormatFrontend(date) {
+  return dateFormat(date, FRONTEND_FORMAT)
+}
+
+function dateParse(string, format) {
+  const date = moment(string, 'MM-DD-YYYY')
+  if (date.isValid()) {
+    return date.getDate()
+  }
+
+  return null
+}
+
+export function dateParseFrontend(string) {
+  return dateParse(string, FRONTEND_FORMAT)
 }

pages/_app.js

@@ -4,9 +4,6 @@ import '../styles/index.css'
 
 import 'react-day-picker/lib/style.css'
 
-import 'moment'
-import 'moment/locale/de'
-
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

styles/index.css

@@ -25,7 +25,7 @@
 }
 
 .input-text {
-  @apply appearance-none block bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight;
+  @apply appearance-none bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight w-full;
 }
 
 .input-text:disabled {
@@ -40,6 +40,18 @@
   @apply border-red-500;
 }
 
+.ibtn {
+  @apply py-2 px-2 text-gray-400 w-10 h-10;
+}
+
+.ibtn:hover {
+  @apply text-gray-500;
+}
+
+.ibtn:active {
+  @apply text-gray-800;
+}
+
 .btn {
   @apply font-bold py-2 px-4 rounded mx-2;
 }
@@ -64,11 +76,18 @@
   @apply bg-gray-700;
 }
 
-/*@screen md {
+@screen sm {
   .fs {
     @apply w-1/2 mb-0;
   }
-}*/
+}
+.DayPickerInput .input-text {
+  @apply w-full;
+}
+
+.DayPickerInput {
+  @apply w-1/3;
+}
 
 .datepicker
   .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {