feat: Add normalizing of input values that are missing delimiters

src/components/Input.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useContext, useEffect, useRef } from "react";
 
 import { BORDER_COLOR, DATE_FORMAT, RING_COLOR } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { dateIsValid, parseFormattedDate } from "../helpers";
+import { dateIsValid, normalizeDateInput, parseFormattedDate } from "../helpers";
 
 import ToggleButton from "./ToggleButton";
 
@@ -71,7 +71,8 @@ const Input: React.FC<Props> = (e: Props) => {
             const dates = [];
 
             if (asSingle) {
-                const date = parseFormattedDate(inputValue, displayFormat);
+                const normalized = normalizeDateInput(inputValue, displayFormat);
+                const date = parseFormattedDate(normalized, displayFormat);
                 if (dateIsValid(date.toDate())) {
                     dates.push(date.format(DATE_FORMAT));
                 }

src/helpers/index.ts

@@ -626,3 +626,40 @@ export function loadLanguageModule(language = LANGUAGE) {
 export function dateIsValid(date: Date | number) {
     return date instanceof Date && !isNaN(date.getTime());
 }
+
+// Add in slashes if no seperator exists (all numbers), based on the display format
+export function normalizeDateInput(value: string, displayFormat: string) {
+    const displayFormatWithoutSeperators = displayFormat.replace(/[^A-Z]/gi, "");
+    if (value.length === 8 && displayFormatWithoutSeperators === "MMDDYYYY") {
+        const month = value.slice(0, 2);
+        const day = value.slice(2, 4);
+        const year = value.slice(4, 8);
+        return `${month}/${day}/${year}`;
+    } else if (value.length === 8 && displayFormatWithoutSeperators === "YYYYMMDD") {
+        const year = value.slice(0, 4);
+        const month = value.slice(4, 6);
+        const day = value.slice(6, 8);
+        return `${year}/${month}/${day}`;
+    } else if (value.length === 8 && displayFormatWithoutSeperators === "DDMMYYYY") {
+        const day = value.slice(0, 2);
+        const month = value.slice(2, 4);
+        const year = value.slice(4, 8);
+        return `${day}/${month}/${year}`;
+    } else if (value.length === 6 && displayFormatWithoutSeperators === "MMDDYY") {
+        const month = value.slice(0, 2);
+        const day = value.slice(2, 4);
+        const year = value.slice(4, 6);
+        return `${month}/${day}/${year}`;
+    } else if (value.length === 6 && displayFormatWithoutSeperators === "YYMMDD") {
+        const year = value.slice(0, 2);
+        const month = value.slice(2, 4);
+        const day = value.slice(4, 6);
+        return `${year}/${month}/${day}`;
+    } else if (value.length === 6 && displayFormatWithoutSeperators === "DDMMYY") {
+        const day = value.slice(0, 2);
+        const month = value.slice(2, 4);
+        const year = value.slice(4, 6);
+        return `${day}/${month}/${year}`;
+    }
+    return value;
+}

tsconfig.json

@@ -20,7 +20,8 @@
         "skipLibCheck": true,
         "noEmit": true,
         "resolveJsonModule": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "incremental": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]