Fix/datepicker validation

packages/core/src/util/defaultDateFormat.ts

@@ -0,0 +1,28 @@
+/*
+  The MIT License
+
+  Copyright (c) 2023-2023 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+export const defaultDateFormat = 'YYYY-MM-DD';
+export const defaultTimeFormat = 'HH:mm:ss';
+export const defaultDateTimeFormat = 'YYYY-MM-DDTHH:mm:ss.sssZ';

packages/core/src/util/index.ts

@@ -38,3 +38,4 @@ export * from './type';
 export * from './uischema';
 export * from './util';
 export * from './validator';
+export * from './defaultDateFormat';

packages/examples/src/examples/dates.ts

@@ -129,12 +129,12 @@ export const uischema = {
 export const data = {
   schemaBased: {
     date: new Date().toISOString().substr(0, 10),
-    time: '13:37',
+    time: '13:37:00',
     datetime: new Date().toISOString(),
   },
   uiSchemaBased: {
     date: new Date().toISOString().substr(0, 10),
-    time: '13:37',
+    time: '13:37:00',
     datetime: '1999/12/11 10:05 am',
   },
 };

packages/material-renderers/package.json

@@ -59,7 +59,8 @@
     },
     "testEnvironment": "jsdom",
     "testMatch": [
-      "**/test/**/*.test.tsx"
+      "**/test/**/*.test.tsx",
+      "**/test/**.test.ts"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",

packages/material-renderers/src/controls/MaterialDateControl.tsx

@@ -23,9 +23,10 @@
   THE SOFTWARE.
 */
 import merge from 'lodash/merge';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   ControlProps,
+  defaultDateFormat,
   isDateControl,
   isDescriptionHidden,
   RankedTester,
@@ -35,7 +36,12 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialDateControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -62,8 +68,10 @@ export const MaterialDateControl = (props: ControlProps) => {
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
+  const [key, setKey] = useState<number>(0);
+
   const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
-  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
 
@@ -73,20 +81,36 @@ export const MaterialDateControl = (props: ControlProps) => {
     ? errors
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
+
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
 
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           views={views}
           disabled={!enabled}
@@ -109,7 +133,7 @@ export const MaterialDateControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

packages/material-renderers/src/controls/MaterialDateTimeControl.tsx

@@ -22,10 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import merge from 'lodash/merge';
 import {
   ControlProps,
+  defaultDateTimeFormat,
   isDateTimeControl,
   isDescriptionHidden,
   RankedTester,
@@ -35,7 +36,12 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -64,7 +70,10 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
-  const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
+  const saveFormat =
+    appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
+
+  const [key, setKey] = useState<number>(0);
 
   const views = appliedUiSchemaOptions.views ?? [
     'year',
@@ -80,20 +89,35 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
 
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           ampm={!!appliedUiSchemaOptions.ampm}
           views={views}
@@ -117,7 +141,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

packages/material-renderers/src/controls/MaterialTimeControl.tsx

@@ -22,20 +22,26 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import merge from 'lodash/merge';
 import {
   ControlProps,
   isTimeControl,
   isDescriptionHidden,
   RankedTester,
   rankWith,
+  defaultTimeFormat,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -56,6 +62,8 @@ export const MaterialTimeControl = (props: ControlProps) => {
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
 
+  const [key, setKey] = useState<number>(0);
+
   const showDescription = !isDescriptionHidden(
     visible,
     description,
@@ -64,7 +72,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
-  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
 
@@ -75,19 +83,35 @@ export const MaterialTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           ampm={!!appliedUiSchemaOptions.ampm}
           views={views}
@@ -111,7 +135,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

packages/material-renderers/src/util/datejs.tsx

@@ -8,17 +8,56 @@ export const createOnChangeHandler =
   (
     path: string,
     handleChange: (path: string, value: any) => void,
-    saveFormat: string | undefined
+    saveFormat: string
   ) =>
-  (time: dayjs.Dayjs) => {
-    if (!time) {
+  (value: dayjs.Dayjs) => {
+    if (!value) {
       handleChange(path, undefined);
-      return;
+    } else if (value.toString() !== 'Invalid Date') {
+      const formatedDate = formatDate(value, saveFormat);
+      handleChange(path, formatedDate);
     }
-    const result = dayjs(time).format(saveFormat);
-    handleChange(path, result);
   };
 
+export const createOnBlurHandler =
+  (
+    path: string,
+    handleChange: (path: string, value: any) => void,
+    format: string,
+    saveFormat: string,
+    rerenderChild: () => void,
+    onBlur: () => void
+  ) =>
+  (e: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement, Element>) => {
+    const date = dayjs(e.target.value, format);
+    const formatedDate = formatDate(date, saveFormat);
+    if (formatedDate.toString() === 'Invalid Date') {
+      handleChange(path, undefined);
+      rerenderChild();
+    } else {
+      handleChange(path, formatedDate);
+    }
+    onBlur();
+  };
+
+export const formatDate = (date: dayjs.Dayjs, saveFormat: string) => {
+  let formatedDate = date.format(saveFormat);
+  // Workaround to address a bug in Dayjs, neglecting leading 0 (https://github.com/iamkun/dayjs/issues/1849)
+  const indexOfYear = saveFormat.indexOf('YYYY');
+  if (date.year() < 1000 && indexOfYear !== -1) {
+    const stringUpToYear = formatedDate.slice(0, indexOfYear);
+    const stringFromYear = formatedDate.slice(indexOfYear);
+    if (date.year() >= 100) {
+      formatedDate = [stringUpToYear, 0, stringFromYear].join('');
+    } else if (date.year() >= 10) {
+      formatedDate = [stringUpToYear, 0, 0, stringFromYear].join('');
+    } else if (date.year() >= 1) {
+      formatedDate = [stringUpToYear, 0, 0, 0, stringFromYear].join('');
+    }
+  }
+  return formatedDate;
+};
+
 export const getData = (
   data: any,
   saveFormat: string | undefined