Parse custom formats using input

Author: t0m3k

src/components/Input.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useRef } from "react";
 
 import { BORDER_COLOR, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { dateIsValid } from "../helpers";
+import { dateIsValid, parseFormattedDate } from "../helpers";
 
 import ToggleButton from "./ToggleButton";
 
@@ -66,22 +66,24 @@ const Input: React.FC<Props> = (e: Props) => {
     const handleInputChange = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
             const inputValue = e.target.value;
-            const start = `${inputValue.slice(0, 4)}-${inputValue.slice(5, 7)}-${inputValue.slice(
-                8,
-                10
-            )}`;
-            const end = `${inputValue.slice(13, 17)}-${inputValue.slice(18, 20)}-${inputValue.slice(
-                21,
-                inputValue.length
-            )}`;
+
+            const start = parseFormattedDate(inputValue.slice(0, 10), displayFormat).format(
+                "YYYY-MM-DD"
+            );
+            const end = asSingle
+                ? start
+                : parseFormattedDate(inputValue.slice(11, inputValue.length), displayFormat).format(
+                      "YYYY-MM-DD"
+                  );
+
             const input = inputRef?.current;
 
             if (
                 start.length === 10 &&
                 end.length === 10 &&
                 dateIsValid(new Date(start)) &&
                 dateIsValid(new Date(end)) &&
-                dayjs(start).isBefore(end)
+                (dayjs(start).isBefore(end) || asSingle)
             ) {
                 changeDatepickerValue(
                     {
@@ -90,15 +92,23 @@ const Input: React.FC<Props> = (e: Props) => {
                     },
                     e.target
                 );
-                changeDayHover(dayjs(end).add(-1, "day").format("YYYY-MM-DD"));
+                if (!asSingle) changeDayHover(dayjs(end).add(-1, "day").format("YYYY-MM-DD"));
+                else changeDayHover(start);
                 hideDatepicker();
                 if (input) {
                     input.blur();
                 }
             }
             changeInputText(e.target.value);
         },
-        [changeDatepickerValue, changeDayHover, changeInputText, hideDatepicker]
+        [
+            changeDatepickerValue,
+            changeDayHover,
+            changeInputText,
+            hideDatepicker,
+            displayFormat,
+            asSingle
+        ]
     );
 
     // UseEffects && UseLayoutEffect

src/helpers/index.ts

@@ -1,7 +1,9 @@
 import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
 import weekday from "dayjs/plugin/weekday";
 
 dayjs.extend(weekday);
+dayjs.extend(customParseFormat);
 
 export function classNames(...classes: (false | null | undefined | string)[]) {
     return classes.filter(Boolean).join(" ");
@@ -69,6 +71,10 @@ export function formatDate(date: dayjs.Dayjs, format = "YYYY-MM-DD") {
     return date.format(format);
 }
 
+export function parseFormattedDate(date: string, format = "YYYY-MM-DD") {
+    return dayjs(date, format);
+}
+
 export function getFirstDayInMonth(date: string | dayjs.Dayjs) {
     return {
         ddd: formatDate(dayjs(date).startOf("month"), "ddd"),