fix bug with date

Common/Types/Date.ts

@@ -43,6 +43,32 @@ export default class OneUptimeDate {
             .toDate();
     }
 
+    public static timezoneOffsetDate(date: Date) {
+        return this.addRemoveMinutes(date, date.getTimezoneOffset());
+    }
+
+    public static toDateTimeLocalString(date: Date): string {
+        const ten = (i: number) => {
+            return (i < 10 ? '0' : '') + i;
+        },
+            YYYY = date.getFullYear(),
+            MM = ten(date.getMonth() + 1),
+            DD = ten(date.getDate()),
+            HH = ten(date.getHours()),
+            II = ten(date.getMinutes()),
+            SS = ten(date.getSeconds())
+            ;
+        return YYYY + '-' + MM + '-' + DD + 'T' +
+            HH + ':' + II + ':' + SS;
+    }
+
+    public static addRemoveMinutes(date: Date, minutes: number): Date {
+
+        return moment(date)
+            .add(minutes, 'minutes')
+            .toDate();
+    }
+
     public static getSecondsInDays(days: PositiveNumber | number): number {
         if (!(days instanceof PositiveNumber)) {
             days = new PositiveNumber(days);

CommonUI/src/Components/Input/Input.tsx

@@ -1,4 +1,5 @@
 import Color from 'Common/Types/Color';
+import OneUptimeDate from 'Common/Types/Date';
 import React, {
     FunctionComponent,
     ReactElement,
@@ -14,7 +15,7 @@ export interface ComponentProps {
     onChange?: undefined | ((value: string) => void);
     value?: string | undefined;
     readOnly?: boolean | undefined;
-    type?: 'text' | 'number' | 'date';
+    type?: 'text' | 'number' | 'date' | 'datetime-local';
     leftCircleColor?: Color | undefined;
     onFocus?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
@@ -26,6 +27,27 @@ const Input: FunctionComponent<ComponentProps> = (
     props: ComponentProps
 ): ReactElement => {
     const [value, setValue] = useState<string>('');
+    const [displayValue, setDisplayValue] = useState<string>('');
+
+    useEffect(() => {
+        if (props.type === "date" || props.type === "datetime-local") {
+            if (value && !value.includes(" - ")) { // " - " is for InBetween dates. 
+                const date: Date = OneUptimeDate.fromString(value);
+                let dateString = '';
+                if (props.type === "datetime-local") {
+                    dateString = OneUptimeDate.toDateTimeLocalString(date)
+                } else {
+                    dateString = OneUptimeDate.asDateForDatabaseQuery(date)
+                }
+                setDisplayValue(dateString);
+            } else if(!value.includes(" - ")) {
+                setDisplayValue('');
+            }
+        } else {
+            setDisplayValue(value);
+        }
+
+    })
 
     useEffect(() => {
         if (props.initialValue) {
@@ -70,13 +92,23 @@ const Input: FunctionComponent<ComponentProps> = (
             <input
                 data-testid={props.dataTestId}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setValue(e.target.value);
+
+                    const value = e.target.value;
+
+                    if ((props.type === "date" || props.type === "datetime-local") &&value ) {
+                        const date = OneUptimeDate.fromString(value);
+                        const dateString = OneUptimeDate.toString(date);
+                        setValue(dateString);
+                    } else {
+                        setValue(value);
+                    }
+
                     if (props.onChange) {
-                        props.onChange(e.target.value);
+                        props.onChange(value);
                     }
                 }}
                 tabIndex={props.tabIndex}
-                value={value}
+                value={displayValue}
                 readOnly={props.readOnly || false}
                 type={props.type || 'text'}
                 placeholder={props.placeholder}